Configure Jest dynamically per side

packages/cli/src/commands/test.js

@@ -1,20 +1,46 @@
 import execa from 'execa'
-import Listr from 'listr'
-import VerboseRenderer from 'listr-verbose-renderer'
 import terminalLink from 'terminal-link'
 
 import { getPaths } from 'src/lib'
 import c from 'src/lib/colors'
 
+const jest = require('jest')
+
+// TODO: Get from redwood.toml
+const sides = ['web', 'api']
+
+// https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/test.js#L39
+function isInGitRepository() {
+  try {
+    execa.commandSync('git rev-parse --is-inside-work-tree')
+    return true
+  } catch (e) {
+    return false
+  }
+}
+
+function isInMercurialRepository() {
+  try {
+    execa.commandSync('hg --cwd . root')
+    return true
+  } catch (e) {
+    return false
+  }
+}
+
 export const command = 'test [side..]'
 export const description = 'Run Jest tests for api and web'
 export const builder = (yargs) => {
   yargs
-    .positional('side', {
-      choices: ['api', 'web'],
-      default: ['api', 'web'],
-      description: 'Which side(s) to test',
-      type: 'array',
+    .choices('side', sides)
+    .option('watch', {
+      type: 'boolean',
+    })
+    .option('watchAll', {
+      type: 'boolean',
+    })
+    .option('collectCoverage', {
+      type: 'boolean',
     })
     .epilogue(
       `Also see the ${terminalLink(
@@ -24,51 +50,45 @@ export const builder = (yargs) => {
     )
 }
 
-export const handler = async ({ side }) => {
-  const { base: BASE_DIR, cache: CACHE_DIR } = getPaths()
+export const handler = async ({ side, watch, watchAll, collectCoverage }) => {
+  const { cache: CACHE_DIR } = getPaths()
+  const sides = [].concat(side).filter(Boolean)
 
-  const DB_URL = process.env.TEST_DATABASE_URL || `file:${CACHE_DIR}/test.db`
+  const args = [
+    '--passWithNoTests',
+    watch && '--watch',
+    collectCoverage && '--collectCoverage',
+    watchAll && '--watchAll',
+  ].filter(Boolean)
 
-  const execCommands = {
-    api: {
-      cwd: `${BASE_DIR}/api`,
-      cmd: `DATABASE_URL=${DB_URL} yarn rw db up && yarn jest`,
-      args: [
-        '--passWithNoTests',
-        '--config ../node_modules/@redwoodjs/core/config/jest.config.api.js',
-      ],
-    },
-    web: {
-      cwd: `${BASE_DIR}/web`,
-      cmd: 'yarn jest',
-      args: [
-        '--passWithNoTests',
-        '--config ../node_modules/@redwoodjs/core/config/jest.config.web.js',
-      ],
-    },
+  // Watch unless on CI or explicitly running all tests
+  if (!process.env.CI && !watchAll && !collectCoverage) {
+    // https://github.com/facebook/create-react-app/issues/5210
+    const hasSourceControl = isInGitRepository() || isInMercurialRepository()
+    args.push(hasSourceControl ? '--watch' : '--watchAll')
   }
 
-  const tasks = new Listr(
-    side.map((sideName) => {
-      const { cmd, args, cwd } = execCommands[sideName]
-      return {
-        title: `Running '${sideName}' jest tests`,
-        task: () => {
-          return execa(cmd, args, {
-            stdio: 'inherit',
-            shell: true,
-            cwd,
-          })
-        },
-      }
-    }),
-    {
-      renderer: VerboseRenderer,
-    }
-  )
+  args.push('--config', './node_modules/@redwoodjs/core/config/jest.config.js')
+
+  if (sides.length > 0) {
+    args.push('--projects', ...sides)
+  }
 
   try {
-    await tasks.run()
+    /**
+     * Migrate test database. This should be moved to somehow be done on a
+     * per-side basis if possible.
+     */
+    const DATABASE_URL =
+      process.env.TEST_DATABASE_URL || `file:${CACHE_DIR}/test.db`
+
+    await execa.command(`yarn rw db up`, {
+      stdio: 'inherit',
+      shell: true,
+      env: { DATABASE_URL },
+    })
+
+    jest.run(args)
   } catch (e) {
     console.log(c.error(e.message))
   }

packages/core/config/babel-preset.js

@@ -12,6 +12,12 @@ const TARGETS_NODE = '12.16.1'
 // were added in minor core-js releases.
 const CORE_JS_VERSION = '3.6'
 
+const path = require('path')
+
+const { getPaths } = require('@redwoodjs/internal')
+
+const redwoodPaths = getPaths()
+
 module.exports = () => ({
   presets: ['@babel/preset-react', '@babel/preset-typescript'],
   plugins: [
@@ -57,7 +63,7 @@ module.exports = () => ({
           'babel-plugin-module-resolver',
           {
             alias: {
-              src: './src',
+              src: path.join(redwoodPaths.api.base, 'src'),
             },
           },
         ],
@@ -101,7 +107,7 @@ module.exports = () => ({
           'babel-plugin-module-resolver',
           {
             alias: {
-              src: './src',
+              src: path.join(redwoodPaths.web.base, 'src'),
             },
           },
         ],

packages/core/config/jest.config.js

@@ -0,0 +1,18 @@
+// used by cli `rw test` command
+
+const path = require('path')
+
+const { getPaths } = require('@redwoodjs/internal')
+
+const redwoodPaths = getPaths()
+
+module.exports = {
+  collectCoverageFrom: [
+    '**/*.{js,jsx,ts,tsx}',
+    '!**/node_modules/**',
+    '!**/dist/**',
+  ],
+  coverageDirectory: path.join(redwoodPaths.base, 'coverage'),
+  rootDir: redwoodPaths.base,
+  projects: ['<rootDir>/{,!(node_modules)/**/}jest.config.js'],
+}

packages/core/package.json

@@ -6,6 +6,8 @@
     "config",
     "dist"
   ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "dependencies": {
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.9.0",
@@ -44,7 +46,7 @@
     "graphql": "^14.6.0",
     "graphql-tag": "^2.10.3",
     "html-webpack-plugin": "^4.0.2",
-    "jest": "^25.2.3",
+    "jest": "^26.1.0",
     "jest-directory-named-resolver": "^0.3.0",
     "lodash.escaperegexp": "^4.1.2",
     "mini-css-extract-plugin": "^0.9.0",
@@ -60,7 +62,9 @@
   },
   "gitHead": "1cb7c8d1085147787209af423c33a9c91c3e6517",
   "scripts": {
-    "build": "yarn cross-env NODE_ENV=production babel src --out-dir dist  --extensions \".js,.ts,.tsx\" --delete-dir-on-start",
+    "build": "yarn build:js && yarn build:types",
+    "build:js": "yarn cross-env NODE_ENV=production babel src --out-dir dist  --extensions \".js,.ts,.tsx\" --delete-dir-on-start",
+    "build:types": "tsc --build --clean && tsc --build",
     "prepublishOnly": "yarn build",
     "build:watch": "nodemon --watch src --ext \"js,ts,tsx\" --ignore dist --exec \"yarn build\"",
     "test": "jest",

packages/core/src/browser/config/getBrowserJestConfig.ts

@@ -0,0 +1,56 @@
+// used by cli `rw test` command
+
+const path = require('path')
+
+const { getPaths } = require('@redwoodjs/internal')
+
+const redwoodPaths = getPaths()
+
+const NODE_MODULES_PATH = path.join(redwoodPaths.base, 'node_modules')
+
+export function getBrowserJestConfig() {
+  return {
+    displayName: {
+      color: 'blueBright',
+      name: 'browser',
+    },
+
+    resolver: 'jest-directory-named-resolver',
+    // NOTE: We run the tests with a `cwd` argument that's `getPaths().web.base`
+    // testMatch,
+    globals: {
+      __REDWOOD__: true,
+      __REDWOOD__API_PROXY_PATH: '/',
+    },
+    // transform: { '\\.js$': ['babel-jest', { rootMode: 'upward' }] },
+    setupFilesAfterEnv: [path.resolve(__dirname, './jest.setup.browser.js')],
+    moduleNameMapper: {
+      /**
+       * Make sure modules that require different versions of these
+       * dependencies end up using the same one.
+       */
+      '^react$': path.join(NODE_MODULES_PATH, 'react'),
+      '^react-dom$': path.join(NODE_MODULES_PATH, 'react-dom'),
+      '^@apollo/react-common$': path.join(
+        NODE_MODULES_PATH,
+        '@apollo/react-common'
+      ),
+      // We replace imports to "@redwoodjs/router" with our own implementation.
+      '^@redwoodjs/router$': path.join(
+        NODE_MODULES_PATH,
+        '@redwoodjs/testing/dist/MockRouter.js'
+      ),
+      '^@redwoodjs/web$': path.join(NODE_MODULES_PATH, '@redwoodjs/web'),
+      '^@redwoodjs/testing$': path.join(
+        NODE_MODULES_PATH,
+        '@redwoodjs/testing'
+      ),
+      '~__REDWOOD__USER_ROUTES_FOR_MOCK': getPaths().web.routes,
+      /**
+       * Mock out files that aren't particularly useful in tests. See fileMock.js for more info.
+       */
+      '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css)$':
+        '@redwoodjs/testing/dist/fileMock.js',
+    },
+  }
+}

packages/core/src/getConfig.ts

@@ -0,0 +1,39 @@
+import { getBrowserJestConfig } from './browser/config/getBrowserJestConfig'
+import { getNodeJestConfig } from './node/config/getNodeJestConfig'
+
+// TODO: Add more types like eslint, babel, etc?
+// TODO: Move somewhere else
+enum ConfigType {
+  Jest = 'jest',
+}
+
+// TODO: Add more build targets
+// TODO: Move somewhere else
+enum BuildTarget {
+  Browser = 'browser',
+  Node = 'node',
+}
+
+interface GetJestConfigParams {
+  type: ConfigType.Jest
+  target: BuildTarget
+}
+
+const jestConfigMap = {
+  [BuildTarget.Browser]: getBrowserJestConfig,
+  [BuildTarget.Node]: getNodeJestConfig,
+}
+
+function getJestConfig({ target }: GetJestConfigParams) {
+  return jestConfigMap[target]()
+}
+
+const configMap = {
+  jest: getJestConfig,
+}
+
+type GetConfigParams = GetJestConfigParams
+
+export function getConfig(opts: GetConfigParams) {
+  return configMap[opts.type](opts)
+}

packages/core/src/index.ts

@@ -0,0 +1 @@
+export { getConfig } from './getConfig'

packages/core/src/node/config/getNodeJestConfig.ts

@@ -0,0 +1,13 @@
+const path = require('path')
+
+export function getNodeJestConfig() {
+  return {
+    displayName: {
+      color: 'redBright',
+      name: 'node',
+    },
+
+    resolver: 'jest-directory-named-resolver',
+    setupFilesAfterEnv: [path.resolve(__dirname, './jest.setup.node.js')],
+  }
+}