[Testing] Improve testing capabilities for Web

packages/core/config/babel-plugin-routes-auto-loader.js

@@ -0,0 +1,60 @@
+const path = require('path')
+
+const { getPaths } = require('@redwoodjs/internal')
+const { processPagesDir } = require('@redwoodjs/internal')
+
+const redwoodPaths = getPaths()
+
+module.exports = function ({ types: t }) {
+  // Process the dir to find all Page dependencies.
+  let deps = processPagesDir()
+
+  return {
+    visitor: {
+      // Remove any deps that have been explicitly declared in the Routes file. When one
+      // is present, the user is requesting that the module be included in the main
+      // bundle.
+      ImportDeclaration(path) {
+        const declaredImports = path.node.specifiers.map(
+          (specifier) => specifier.local.name
+        )
+
+        deps = deps.filter((dep) => !declaredImports.includes(dep.const))
+      },
+      Program: {
+        exit(nodePath) {
+          // Prepend all imports to the top of the file
+          deps.forEach((dep) => {
+            const basename = path.posix.basename(dep.const)
+            const importFile = [redwoodPaths.web.src, 'pages', basename].join(
+              '/'
+            )
+
+            nodePath.node.body.unshift(
+              t.variableDeclaration('const', [
+                t.variableDeclarator(
+                  t.identifier(dep.const),
+                  t.objectExpression([
+                    t.objectProperty(
+                      t.identifier('name'),
+                      t.stringLiteral(dep.const)
+                    ),
+                    t.objectProperty(
+                      t.identifier('loader'),
+                      t.arrowFunctionExpression(
+                        [],
+                        t.callExpression(t.identifier('import'), [
+                          t.stringLiteral(importFile),
+                        ])
+                      )
+                    ),
+                  ])
+                ),
+              ])
+            )
+          })
+        },
+      },
+    },
+  }
+}

packages/core/config/babel-preset.js

@@ -2,6 +2,9 @@
  * This is the babel preset used `create-redwood-app`
  */
 
+const { getPaths } = require('@redwoodjs/internal')
+const redwoodPaths = getPaths()
+
 // TODO: Determine what to do different during development, test, and production
 // TODO: Take a look at create-react-app. They've dropped a ton of knowledge.
 
@@ -132,5 +135,11 @@ module.exports = () => ({
       test: /.+Cell.(js|tsx)$/,
       plugins: [require('./babel-plugin-redwood-cell')],
     },
+    // Automatically import files in `src/pages/*` in to
+    // the `src/Routes.[ts|jsx]` file.
+    {
+      test: redwoodPaths.web.routes,
+      plugins: [require('./babel-plugin-routes-auto-loader')],
+    },
   ],
 })

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

@@ -2,11 +2,38 @@
 
 const path = require('path')
 
+const { getPaths } = require('@redwoodjs/internal')
+
+const redwoodPaths = getPaths()
+
 module.exports = {
   resolver: 'jest-directory-named-resolver',
   rootDir: process.cwd(),
   globals: {
     __REDWOOD__API_PROXY_PATH: '/',
   },
+  // TODO: use getPaths().web.base instead.
   setupFilesAfterEnv: [path.resolve(__dirname, './jest.setup.web.js')],
+  moduleNameMapper: {
+    /**
+     * Make sure modules that require different versions of these
+     * dependencies end up using the same one.
+     */
+    '^react$': path.resolve(redwoodPaths.base, 'node_modules', 'react'),
+    '^react-dom$': path.resolve(redwoodPaths.base, 'node_modules', 'react-dom'),
+    '^@apollo/react-common$': path.resolve(
+      redwoodPaths.base,
+      'node_modules',
+      '@apollo/react-common'
+    ),
+
+    /**
+     * 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)$': path.resolve(
+      redwoodPaths.base,
+      'node_modules',
+      'fileMock.js'
+    ),
+  },
 }

packages/core/config/webpack.common.js

@@ -157,17 +157,6 @@ module.exports = (webpackEnv) => {
             },
           ],
         },
-        {
-          // Automatically import files in `src/pages/*` in to
-          // the `src/Routes.[ts|jsx]` file.
-          test: redwoodPaths.web.routes,
-          use: {
-            loader: path.resolve(
-              __dirname,
-              '../dist/loaders/routes-auto-loader.js'
-            ),
-          },
-        },
       ],
     },
     optimization: {

packages/core/package.json

@@ -17,6 +17,7 @@
     "@babel/preset-typescript": "^7.9.0",
     "@babel/runtime-corejs3": "^7.9.2",
     "@prisma/cli": "2.0.0-beta.5",
+    "@redwoodjs/testing": "0.7.0",
     "@redwoodjs/cli": "^0.7.1-canary.8",
     "@redwoodjs/dev-server": "^0.7.1-canary.8",
     "@redwoodjs/eslint-config": "^0.7.1-canary.8",
@@ -25,8 +26,8 @@
     "@testing-library/react": "^10.0.1",
     "@types/jest": "^25.1.4",
     "@types/node": "^13.9.5",
-    "@types/react": "16.9.34",
-    "@types/react-dom": "16.9.7",
+    "@types/react": "16.9.35",
+    "@types/react-dom": "16.9.8",
     "@types/webpack": "^4.41.11",
     "babel-jest": "^25.2.3",
     "babel-loader": "^8.1.0",
@@ -68,5 +69,8 @@
   },
   "devDependencies": {
     "babel-plugin-tester": "^9.0.1"
+  },
+  "resolutions": {
+    "@types/react": "16.9.35"
   }
 }

packages/testing/.babelrc.js

@@ -0,0 +1 @@
+module.exports = { extends: '../../babel.config.js' }

packages/testing/README.md

@@ -0,0 +1,27 @@
+# PackageName
+
+<!-- toc -->
+- [Purpose and Vision](#Purpose-and-Vision)
+- [Package Lead](#Package-Lead)
+- [Roadmap](#Roadmap)
+- [Contributing](#Contributing)
+- [FAQ](#FAQ)
+
+## Purpose and Vision
+The Testing package contains a custom renderer based on `@testing-library/react`'s `render` method. All methods from this library are exposed through `@redwoodjs/testing`
+
+## Package Lead
+[@RobertBroersma](https://github.com/RobertBroersma)
+
+## Roadmap
+See [[Testing] Support Jest --config extensibility](https://github.com/redwoodjs/redwood/issues/564)
+
+## Contributing
+Core technologies
+- [Jest](https://jestjs.io/docs/en/getting-started)
+- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)
+
+
+## FAQ
+
+Answers to frequently asked questions.

packages/testing/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@redwoodjs/testing",
+  "version": "0.7.0",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "@redwoodjs/router": "^0.6.0",
+    "react": "*"
+  },
+  "dependencies": {
+    "@apollo/react-testing": "^3.1.4",
+    "@redwoodjs/web": "^0.6.0",
+    "@testing-library/react": "^10.0.4"
+  },
+  "scripts": {
+    "build": "yarn cross-env NODE_ENV=production babel src -d dist --delete-dir-on-start --extensions \".js,.ts\" --source-maps inline"
+  }
+}

packages/testing/src/fileMock.js

@@ -0,0 +1,6 @@
+/**
+ * configure Jest to gracefully handle asset files such as stylesheets and images.
+ * Usually, these files aren't particularly useful in tests so we can safely mock them out.
+ * https://jestjs.io/docs/en/webpack#handling-static-assets
+ */
+module.exports = 'fileMock'

packages/testing/src/index.js

@@ -0,0 +1,7 @@
+import * as routerMock from './routerMock'
+export { routerMock }
+
+// https://testing-library.com/docs/react-testing-library/setup#custom-render
+export * from '@testing-library/react'
+export { MockedProvider } from '@apollo/react-testing'
+export { customRender as render } from './render'

packages/testing/src/render.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { getPaths } from '@redwoodjs/internal'
+import { render } from '@testing-library/react'
+
+const redwoodPaths = getPaths()
+
+const Routes = require(redwoodPaths.web.routes).default
+
+const AllTheProviders = ({ children }) => {
+  return (
+    <>
+      <Routes />
+      {children}
+    </>
+  )
+}
+
+export const customRender = (ui, options = {}) =>
+  render(ui, {
+    wrapper: (props) => <AllTheProviders {...props} />,
+    ...options,
+  })

packages/testing/src/routerMock.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export const routes = {}
+
+export const Router = ({ children }) => {
+  for (let route of React.Children.toArray(children)) {
+    const { name } = route.props
+    routes[name] = jest.fn(() => name)
+  }
+
+  return <></>
+}