Switch router and web from esm to cjs.

babel.config.js

@@ -61,7 +61,25 @@ module.exports = {
             targets: {
               browsers: TARGETS_BROWSERS,
             },
-            modules: false,
+          },
+        ],
+      ],
+      plugins: [
+        [
+          'babel-plugin-auto-import',
+          {
+            declarations: [
+              {
+                // import { React } from 'react'
+                default: 'React',
+                path: 'react',
+              },
+              {
+                // import { PropTypes } from 'prop-types'
+                default: 'PropTypes',
+                path: 'prop-types',
+              },
+            ],
           },
         ],
       ],

package.json

@@ -10,10 +10,11 @@
     "@babel/node": "^7.8.3",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-transform-runtime": "^7.8.3",
-    "@babel/runtime-corejs3": "^7.8.4",
     "@babel/preset-env": "^7.8.4",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
+    "@babel/runtime-corejs3": "^7.8.4",
+    "babel-plugin-auto-import": "^1.0.5",
     "babel-plugin-module-resolver": "^4.0.0",
     "jest": "^25.1.0",
     "lerna": "^3.20.2",
@@ -23,11 +24,14 @@
   "eslintConfig": {
     "extends": "@redwoodjs/eslint-config"
   },
-  "eslintIgnore": ["dist", "packages/api/importAll.macro.js"],
+  "eslintIgnore": [
+    "dist",
+    "packages/api/importAll.macro.js"
+  ],
   "scripts": {
     "build": "NODE_ENV=production lerna run build",
     "test": "lerna run test --stream -- --colors",
     "lint": "yarn eslint './packages/'",
     "lint:fix": "yarn eslint --fix './packages/'"
   }
-}
+}

packages/cli/src/commands/generate/templates/cell/test.js.template

@@ -1,29 +1,34 @@
-import { render, cleanup } from '@testing-library/react'
+import { render, cleanup, screen } from '@testing-library/react'
 
 import { Loading, Empty, Failure, Success } from './${pascalName}Cell'
 
 describe('${pascalName}Cell', () => {
   afterEach(() => {
     cleanup()
   })
+
   it('Loading renders successfully', () => {
-    expect(() => {
-      render(<Loading />)
-    }).not.toThrow()
+    render(<Loading />)
+    // Use screen.debug() to see output.
+    expect(screen.queryByText('Loading...')).toBeInTheDocument()
   })
+
   it('Empty renders successfully', () => {
-    expect(() => {
-      render(<Empty />)
-    }).not.toThrow()
+    render(<Empty />)
+    expect(screen.queryByText('Empty')).toBeInTheDocument()
   })
+
   it('Failure renders successfully', () => {
-    expect(() => {
-      render(<Failure error={{ message: 'error message' }} />)
-    }).not.toThrow()
+    render(<Failure error={{ message: 'Oh no!' }} />)
+    expect(screen.queryByText('Error: Oh no!')).toBeInTheDocument()
   })
+
   it('Success renders successfully', () => {
-    expect(() => {
-      Success({ ${camelName}: { objectKey: 'objectValue' } })
-    }).not.toThrow()
+    render(
+      <Success userExample={{ ${camelName}: { objectKey: 'objectValue' } }} />
+    )
+    expect(
+      screen.queryByText('{"${camelName}":{"objectKey":"objectValue"}}')
+    ).toBeInTheDocument()
   })
 })

packages/cli/src/commands/test.js

@@ -16,23 +16,29 @@ export const handler = async ({ app }) => {
   const execCommands = {
     api: {
       cwd: `${BASE_DIR}/api`,
-      cmd:
-        'yarn jest --passWithNoTests --config ../node_modules/@redwoodjs/core/config/jest.config.api.js',
+      cmd: 'yarn jest',
+      args: [
+        '--passWithNoTests',
+        '--config ../node_modules/@redwoodjs/core/config/jest.config.api.js',
+      ],
     },
     web: {
       cwd: `${BASE_DIR}/web`,
-      cmd:
-        'yarn jest --passWithNoTests --config ../node_modules/@redwoodjs/core/config/jest.config.web.js',
+      cmd: 'yarn jest',
+      args: [
+        '--passWithNoTests',
+        '--config ../node_modules/@redwoodjs/core/config/jest.config.web.js',
+      ],
     },
   }
 
   const tasks = new Listr(
     app.map((appName) => {
-      const { cwd, cmd } = execCommands[appName]
+      const { cmd, args, cwd } = execCommands[appName]
       return {
         title: `Running '${appName}' jest tests`,
         task: () => {
-          return execa(cmd, undefined, {
+          return execa(cmd, args, {
             stdio: 'inherit',
             shell: true,
             cwd,

packages/core/config/jest.config.web.js

@@ -1,6 +1,12 @@
 // used by cli `rw test` command
-// note: rootDir is a workaround for jest working directory weirdness
+
+const path = require('path')
+
 module.exports = {
   resolver: 'jest-directory-named-resolver',
   rootDir: process.cwd(),
+  globals: {
+    __REDWOOD__API_PROXY_PATH: '/',
+  },
+  setupFilesAfterEnv: [path.resolve(__dirname, './jest.setup.web.js')],
 }

packages/core/config/jest.setup.web.js

@@ -0,0 +1 @@
+require('@testing-library/jest-dom')

packages/core/package.json

@@ -20,6 +20,7 @@
     "@redwoodjs/dev-server": "^0.2.5",
     "@redwoodjs/eslint-config": "^0.2.5",
     "@redwoodjs/internal": "^0.2.5",
+    "@testing-library/jest-dom": "^5.1.1",
     "@testing-library/react": "^9.5.0",
     "@types/jest": "^25.1.3",
     "@types/node": "^13.7.7",

packages/eslint-config/index.js

@@ -19,13 +19,15 @@ module.exports = {
     'jsx-a11y',
     'react',
     'react-hooks',
+    'jest-dom',
     '@redwoodjs/redwood',
   ],
   ignorePatterns: ['node_modules', 'dist'],
   extends: [
     'eslint:recommended',
     'plugin:react/recommended',
     'plugin:prettier/recommended',
+    'plugin:jest-dom/recommended',
     'prettier/react',
   ],
   overrides: [

packages/eslint-config/package.json

@@ -17,6 +17,7 @@
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^2.5.0",
+    "eslint-plugin-jest-dom": "^2.0.1",
     "prettier": "^1.19.1"
   },
   "gitHead": "2801c132f40263f9fcfbdac8b1750d2e423eb649"

packages/router/package.json

@@ -4,11 +4,14 @@
   "files": [
     "dist"
   ],
-  "module": "dist/index.js",
+  "main": "dist/index.js",
   "license": "MIT",
   "dependencies": {
     "core-js": "3.6.4"
   },
+  "peerDependencies": {
+    "react": "*"
+  },
   "scripts": {
     "build": "yarn clean && babel src -d dist",
     "build:watch": "nodemon --ignore dist --exec 'yarn build'",

packages/web/package.json

@@ -4,7 +4,7 @@
   "files": [
     "dist"
   ],
-  "module": "dist/index.js",
+  "main": "dist/index.js",
   "license": "MIT",
   "dependencies": {
     "@apollo/react-components": "^3.1.3",
@@ -20,6 +20,10 @@
     "proptypes": "^1.1.0",
     "react-hook-form": "^4.10.1"
   },
+  "peerDependencies": {
+    "react": "*",
+    "prop-types": "*"
+  },
   "scripts": {
     "build": "yarn clean && babel src -d dist",
     "build:watch": "nodemon --ignore dist --exec 'yarn build'",