Update Jest (#530)

* Update Jest

* Remove default snapshot test

* Fix a few things

* Add a simple default test

* App.spec.js -> App.test.js

* Fix e2e test

* Bump Jest

config/jest/environment.js

-// Currently, Jest mocks setTimeout() and similar functions by default:
-// https://facebook.github.io/jest/docs/timer-mocks.html
-// We think this is confusing, so we disable this feature.
-// If you see value in it, run `jest.useFakeTimers()` in individual tests.
-beforeEach(() => {
-  jest.useRealTimers();
-});

package.json

@@ -15,7 +15,7 @@
     "create-react-app": "node global-cli/index.js --scripts-version \"$PWD/`npm pack`\"",
     "e2e": "tasks/e2e.sh",
     "start": "node scripts/start.js --debug-template",
-    "test": "node scripts/test.js --debug-template"
+    "test": "node scripts/test.js --debug-template --watch --env=jsdom"
   },
   "files": [
     "PATENTS",
@@ -31,7 +31,7 @@
     "autoprefixer": "6.4.0",
     "babel-core": "6.14.0",
     "babel-eslint": "6.1.2",
-    "babel-jest": "14.1.0",
+    "babel-jest": "15.0.0",
     "babel-loader": "6.2.5",
     "babel-plugin-transform-class-properties": "6.11.5",
     "babel-plugin-transform-object-rest-spread": "6.8.0",
@@ -61,7 +61,7 @@
     "html-loader": "0.4.3",
     "html-webpack-plugin": "2.22.0",
     "http-proxy-middleware": "0.17.0",
-    "jest": "14.1.0",
+    "jest": "15.0.1",
     "json-loader": "0.5.4",
     "object-assign": "4.1.0",
     "opn": "4.0.2",
@@ -80,8 +80,7 @@
   "devDependencies": {
     "bundle-deps": "1.0.0",
     "react": "^15.3.0",
-    "react-dom": "^15.3.0",
-    "react-test-renderer": "^15.3.0"
+    "react-dom": "^15.3.0"
   },
   "optionalDependencies": {
     "fsevents": "1.0.14"

scripts/eject.js

@@ -41,7 +41,6 @@ prompt(
     path.join('config', 'webpack.config.prod.js'),
     path.join('config', 'jest', 'CSSStub.js'),
     path.join('config', 'jest', 'FileStub.js'),
-    path.join('config', 'jest', 'environment.js'),
     path.join('config', 'jest', 'transform.js'),
     path.join('scripts', 'build.js'),
     path.join('scripts', 'start.js'),
@@ -99,17 +98,19 @@ prompt(
   });
 
   console.log('Updating scripts');
+  delete appPackage.scripts['eject'];
   Object.keys(appPackage.scripts).forEach(function (key) {
-    appPackage.scripts[key] = 'node ./scripts/' + key + '.js'
+    appPackage.scripts[key] = appPackage.scripts[key]
+      .replace(/react-scripts test/g, 'jest')
+      .replace(/react-scripts (\w+)/g, 'node scripts/$1.js');
   });
-  delete appPackage.scripts['eject'];
 
-  appPackage.scripts.test = 'jest';
+  // Add Jest config
   appPackage.jest = createJestConfig(
     filePath => path.join('<rootDir>', filePath)
   );
 
-  // explicitly specify ESLint config path for editor plugins
+  // Explicitly specify ESLint config path for editor plugins
   appPackage.eslintConfig = {
     extends: './config/eslint.js',
   };

scripts/init.js

@@ -23,10 +23,12 @@ module.exports = function(appPath, appName, verbose, originalDirectory) {
   appPackage.devDependencies = appPackage.devDependencies || {};
 
   // Setup the script rules
-  appPackage.scripts = {};
-  ['start', 'build', 'eject', 'test'].forEach(function(command) {
-    appPackage.scripts[command] = 'react-scripts ' + command;
-  });
+  appPackage.scripts = {
+    'start': 'react-scripts start',
+    'build': 'react-scripts build',
+    'test': 'react-scripts test --watch --env=jsdom',
+    'eject': 'react-scripts eject'
+  };
 
   // explicitly specify ESLint config path for editor plugins
   appPackage.eslintConfig = {
@@ -69,7 +71,6 @@ module.exports = function(appPath, appName, verbose, originalDirectory) {
     'install',
     'react',
     'react-dom',
-    'react-test-renderer',
     '--save',
     verbose && '--verbose'
   ].filter(function(e) { return e; });

scripts/test.js

@@ -16,9 +16,10 @@ const paths = require('../config/paths');
 
 const argv = process.argv.slice(2);
 
-const index = argv.indexOf('--debug-template');
-if (index !== -1) {
-  argv.splice(index, 1);
+// Don't pass this option to Jest
+const debugTemplateIndex = argv.indexOf('--debug-template');
+if (debugTemplateIndex !== -1) {
+  argv.splice(debugTemplateIndex, 1);
 }
 
 argv.push('--config', JSON.stringify(createJestConfig(

scripts/utils/createJestConfig.js

@@ -9,25 +9,14 @@
 
 module.exports = (resolve, rootDir) => {
   const config = {
-    automock: false,
     moduleNameMapper: {
       '^[./a-zA-Z0-9$_-]+\\.(jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm)$': resolve('config/jest/FileStub.js'),
       '^[./a-zA-Z0-9$_-]+\\.css$': resolve('config/jest/CSSStub.js')
     },
-    persistModuleRegistryBetweenSpecs: true,
     scriptPreprocessor: resolve('config/jest/transform.js'),
-    setupFiles: [
-      resolve('config/polyfills.js')
-    ],
-    setupTestFrameworkScriptFile: resolve('config/jest/environment.js'),
-    testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/build/'],
-    // Allow three popular conventions:
-    // **/__tests__/*.js
-    // **/*.test.js
-    // **/*.spec.js
-    testRegex: '(__tests__/.*|\\.(test|spec))\\.js$',
-    testEnvironment: 'node',
-    verbose: true
+    setupFiles: [resolve('config/polyfills.js')],
+    testPathIgnorePatterns: ['<rootDir>/(build|docs|node_modules)/'],
+    testEnvironment: 'node'
   };
   if (rootDir) {
     config.rootDir = rootDir;

tasks/e2e.sh

@@ -12,7 +12,8 @@ cd "$(dirname "$0")"
 function cleanup {
   echo 'Cleaning up.'
   cd $initial_path
-  rm ../template/src/__tests__/__snapshots__/App-test.js.snap
+  # Uncomment when snapshot testing is enabled by default:
+  # rm ../template/src/__snapshots__/App.test.js.snap
   rm -rf $temp_cli_path $temp_app_path
 }
 
@@ -53,12 +54,9 @@ perl -i -p0e 's/bundledDependencies.*?]/bundledDependencies": []/s' package.json
 npm install
 scripts_path=$PWD/`npm pack`
 
-# lint
+# Lint
 ./node_modules/.bin/eslint --ignore-path .gitignore ./
 
-# Test local start command
-npm start -- --smoke-test
-
 # Test local build command
 npm run build
 
@@ -69,9 +67,13 @@ test -e build/static/css/*.css
 test -e build/static/media/*.svg
 test -e build/favicon.ico
 
-# Run tests
-npm run test
-test -e template/src/__tests__/__snapshots__/App-test.js.snap
+# Run tests, overriding watch option to disable it
+npm test -- --watch=no
+# Uncomment when snapshot testing is enabled by default:
+# test -e template/src/__snapshots__/App.test.js.snap
+
+# Test local start command
+npm start -- --smoke-test
 
 # Pack CLI
 cd global-cli
@@ -99,9 +101,10 @@ test -e build/static/css/*.css
 test -e build/static/media/*.svg
 test -e build/favicon.ico
 
-# Run tests
-npm run test
-test -e src/__tests__/__snapshots__/App-test.js.snap
+# Run tests, overriding watch option to disable it
+npm test -- --watch=no
+# Uncomment when snapshot testing is enabled by default:
+# test -e src/__snapshots__/App.test.js.snap
 
 # Test the server
 npm start -- --smoke-test
@@ -117,9 +120,10 @@ test -e build/static/css/*.css
 test -e build/static/media/*.svg
 test -e build/favicon.ico
 
-# Run tests
-npm run test
-test -e src/__tests__/__snapshots__/App-test.js.snap
+# Run tests, overriding watch option to disable it
+npm test -- --watch=no
+# Uncomment when snapshot testing is enabled by default:
+# test -e src/__snapshots__/App.test.js.snap
 
 # Test the server
 npm start -- --smoke-test

template/src/App.test.js

+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+describe('App', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<App />, div);
+  });
+});

template/src/__tests__/App-test.js

-import React from 'react';
-import App from '../App';
-import renderer from 'react-test-renderer';
-
-describe('App', () => {
-  it('renders a welcome view', () => {
-    const instance = renderer.create(<App />);
-    const tree = instance.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});