Upgrade Jest to version 24 (breaking changes) (#13922)

* Upgrade Jest to version 24 (breaking changes) * Update changelog files to list all dependencies upgraded * Downgrade puppeteer to the previous version 1.6.1 * Try to fix failing e2e tests setup * Added clarification in the changelog * Testing: Remove expect-puppeteer import reference * Address issues raised during code review
WordPress · Mar 6, 2019 · 162d8c7 · 162d8c7
1 parent 927995c
commit 162d8c7
Show file tree

Hide file tree

Showing 27 changed files with 2,048 additions and 2,163 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -87,7 +87,7 @@
 		"deasync": "0.1.14",
 		"deep-freeze": "0.0.1",
 		"doctrine": "2.1.0",
-		"enzyme": "3.7.0",
+		"enzyme": "3.9.0",
 		"eslint-plugin-jest": "21.5.0",
 		"espree": "3.5.4",
 		"fbjs": "0.8.17",

diff --git a/packages/babel-preset-default/CHANGELOG.md b/packages/babel-preset-default/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 4.0.0 (Unreleased)
+
+## Breaking Change
+
+- Removed `babel-core` dependency acting as Babel 7 bridge ([#13922](https://github.com/WordPress/gutenberg/pull/13922). Ensure all references to `babel-core` are replaced with `@babel/core` .
+
 ## 3.0.0 (2018-09-30)
 
 ## Breaking Change

diff --git a/packages/babel-preset-default/package.json b/packages/babel-preset-default/package.json
@@ -30,8 +30,7 @@
 		"@babel/plugin-transform-runtime": "^7.2.0",
 		"@babel/preset-env": "^7.3.1",
 		"@babel/runtime": "^7.3.1",
-		"@wordpress/browserslist-config": "file:../browserslist-config",
-		"babel-core": "^7.0.0-bridge.0"
+		"@wordpress/browserslist-config": "file:../browserslist-config"
 	},
 	"peerDependencies": {
 		"@babel/core": "^7.0.0"

diff --git a/packages/babel-preset-default/test/index.js b/packages/babel-preset-default/test/index.js
@@ -3,7 +3,7 @@
  */
 import path from 'path';
 import { readFileSync } from 'fs';
-import { transform } from 'babel-core';
+import { transform } from '@babel/core';
 
 /**
  * Internal dependencies

diff --git a/packages/components/src/slot-fill/test/index.js b/packages/components/src/slot-fill/test/index.js
@@ -16,13 +16,13 @@ describe( 'createSlotFill', () => {
 		const wrapper = shallow( <MySlotFill.Fill /> );
 
 		expect( wrapper.type() ).toBe( Fill );
-		expect( wrapper ).toHaveProp( 'name', SLOT_NAME );
+		expect( wrapper.prop( 'name' ) ).toBe( SLOT_NAME );
 	} );
 
 	test( 'should match snapshot for Slot', () => {
 		const wrapper = shallow( <MySlotFill.Slot /> );
 
 		expect( wrapper.type() ).toBe( Slot );
-		expect( wrapper ).toHaveProp( 'name', SLOT_NAME );
+		expect( wrapper.prop( 'name' ) ).toBe( SLOT_NAME );
 	} );
 } );
diff --git a/packages/e2e-test-utils/package.json b/packages/e2e-test-utils/package.json
@@ -30,7 +30,7 @@
 		"node-fetch": "^1.7.3"
 	},
 	"peerDependencies": {
-		"jest": ">=23",
+		"jest": ">=24",
 		"puppeteer": ">=1.6"
 	},
 	"publishConfig": {

diff --git a/packages/e2e-tests/config/setup-test-framework.js b/packages/e2e-tests/config/setup-test-framework.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import 'expect-puppeteer';
 import { get } from 'lodash';
 
 /**

diff --git a/packages/e2e-tests/jest.config.js b/packages/e2e-tests/jest.config.js
@@ -1,7 +1,14 @@
 module.exports = {
 	...require( '@wordpress/scripts/config/jest-e2e.config' ),
-	setupTestFrameworkScriptFile: '<rootDir>/config/setup-test-framework.js',
 	setupFiles: [
 		'<rootDir>/config/gutenberg-phase.js',
 	],
+	setupFilesAfterEnv: [
+		'<rootDir>/config/setup-test-framework.js',
+		'expect-puppeteer',
+	],
+	transformIgnorePatterns: [
+		'node_modules',
+		'scripts/config/puppeteer.config.js',
+	],
 };
diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json
@@ -21,11 +21,10 @@
 		"@wordpress/e2e-test-utils": "file:../e2e-test-utils",
 		"@wordpress/jest-console": "file:../jest-console",
 		"@wordpress/scripts": "file:../scripts",
-		"expect-puppeteer": "^3.2.0",
 		"lodash": "^4.17.11"
 	},
 	"peerDependencies": {
-		"jest": ">=23",
+		"jest": ">=24",
 		"puppeteer": ">=1.6"
 	},
 	"publishConfig": {

diff --git a/packages/editor/src/components/block-edit/test/edit.js b/packages/editor/src/components/block-edit/test/edit.js
@@ -42,7 +42,7 @@ describe( 'Edit', () => {
 
 		const wrapper = shallow( <Edit name="core/test-block" /> );
 
-		expect( wrapper.find( edit ) ).toExist();
+		expect( wrapper.exists( edit ) ).toBe( true );
 	} );
 
 	it( 'should use save implementation of block as fallback', () => {
@@ -55,7 +55,7 @@ describe( 'Edit', () => {
 
 		const wrapper = shallow( <Edit name="core/test-block" /> );
 
-		expect( wrapper.find( save ) ).toExist();
+		expect( wrapper.exists( save ) ).toBe( true );
 	} );
 
 	it( 'should combine the default class name with a custom one', () => {
@@ -74,6 +74,7 @@ describe( 'Edit', () => {
 			<Edit name="core/test-block" attributes={ attributes } />
 		);
 
-		expect( wrapper.find( edit ) ).toHaveClassName( 'wp-block-test-block my-class' );
+		expect( wrapper.find( edit ).hasClass( 'wp-block-test-block' ) ).toBe( true );
+		expect( wrapper.find( edit ).hasClass( 'my-class' ) ).toBe( true );
 	} );
 } );
diff --git a/packages/editor/src/components/default-block-appender/test/__snapshots__/index.js.snap b/packages/editor/src/components/default-block-appender/test/__snapshots__/index.js.snap
@@ -16,7 +16,12 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
         "calls": Array [
           Array [],
         ],
-        "results": undefined,
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
       }
     }
     readOnly={true}

diff --git a/packages/editor/src/components/page-attributes/test/check.js b/packages/editor/src/components/page-attributes/test/check.js
@@ -40,18 +40,18 @@ describe( 'PageAttributesCheck', () => {
 	it( 'should render if page attributes support is true and no available templates exist', () => {
 		const wrapper = shallow( <PageAttributesCheck postType={ postType }>content</PageAttributesCheck> );
 
-		expect( wrapper ).toHaveText( 'content' );
+		expect( wrapper.text() ).toContain( 'content' );
 	} );
 
 	it( 'should render if page attributes support is false/unknown and available templates exist', () => {
 		const wrapper = shallow( <PageAttributesCheck availableTemplates={ { 'example.php': 'Example template' } } >content</PageAttributesCheck> );
 
-		expect( wrapper ).toHaveText( 'content' );
+		expect( wrapper.text() ).toContain( 'content' );
 	} );
 
 	it( 'should render if page attributes support is true and available templates exist', () => {
 		const wrapper = shallow( <PageAttributesCheck availableTemplates={ { 'example.php': 'Example template' } } postType={ postType }>content</PageAttributesCheck> );
 
-		expect( wrapper ).toHaveText( 'content' );
+		expect( wrapper.text() ).toContain( 'content' );
 	} );
 } );
diff --git a/packages/jest-console/CHANGELOG.md b/packages/jest-console/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 3.0.0 (Unreleased)
+
+### Breaking Changes
+
+- Increased the recommended Jest dependency to version 24 ([#13922](https://github.com/WordPress/gutenberg/pull/13922).
+
 ## 2.0.7 (2018-11-20)
 
 ## 2.0.5 (2018-09-30)
@@ -8,7 +14,7 @@
 
 ## 2.0.0 (2018-07-12)
 
-### Breaking Change
+### Breaking Changes
 
 - Add new API methods `toHaveInformed`, `toHaveInformedWith`, `toHaveLogged` and `toHaveLoggedWith` ([#137](https://github.com/WordPress/packages/pull/137)). If the code under test calls `console.log` or `console.info` it will fail, unless one of the newly introduced methods is explicitly used to verify it.
 - Updated code to work with Babel 7 ([#7832](https://github.com/WordPress/gutenberg/pull/7832))

diff --git a/packages/jest-console/README.md b/packages/jest-console/README.md
@@ -20,20 +20,16 @@ npm install @wordpress/jest-console --save-dev
 
 ### Setup
 
-The simplest setup is to use Jest's `setupTestFrameworkScriptFile` config option:
+The simplest setup is to use Jest's `setupFilesAfterEnv` config option:
 
 ```js
 "jest": {
-  "setupTestFrameworkScriptFile": "./node_modules/@wordpress/jest-console/build/index.js"
+  "setupFilesAfterEnv": [
+    "@wordpress/jest-console"
+  ]
 },
 ```
 
-If your project already has a script file which sets up the test framework, you will need the following import statement:
-
-```js
-import '@wordpress/jest-console';
-```
-
 ### Usage
 
 ### `.toHaveErrored()`

diff --git a/packages/jest-console/package.json b/packages/jest-console/package.json
@@ -26,11 +26,11 @@
 	"module": "build-module/index.js",
 	"dependencies": {
 		"@babel/runtime": "^7.3.1",
-		"jest-matcher-utils": "^23.6.0",
+		"jest-matcher-utils": "^24.0.0",
 		"lodash": "^4.17.11"
 	},
 	"peerDependencies": {
-		"jest": ">=22"
+		"jest": ">=24"
 	},
 	"publishConfig": {
 		"access": "public"

diff --git a/packages/jest-preset-default/CHANGELOG.md b/packages/jest-preset-default/CHANGELOG.md
@@ -1,3 +1,14 @@
+## 4.0.0 (Unreleased)
+
+### Breaking Changes
+
+- The bundled `jest` dependency has been updated from requiring `^23.6.0` to requiring `^24.1.0` (see [Breaking Changes](https://jestjs.io/blog/2019/01/25/jest-24-refreshing-polished-typescript-friendly#breaking-changes), [#13922](https://github.com/WordPress/gutenberg/pull/13922)).
+- The bundled `jest-enzyme` dependency has been removed completely ([#13922](https://github.com/WordPress/gutenberg/pull/13922)).
+
+### Internal
+
+- The bundled `enzyme` dependency has been updated from requiring `^3.7.0` to requiring `^3.9.0` ([#13922](https://github.com/WordPress/gutenberg/pull/13922)).
+
 ## 3.0.3 (2018-11-20)
 
 ## 3.0.2 (2018-11-09)

diff --git a/packages/jest-preset-default/README.md b/packages/jest-preset-default/README.md
@@ -27,21 +27,11 @@ npm install @wordpress/jest-preset-default --save-dev
 * `moduleNameMapper` - all `css` and `scss` files containing CSS styles will be stubbed out.
 * `modulePaths` - the root dir of the project is used as a location to search when resolving modules.
 * `setupFiles` - runs code before each test which sets up global variables required in the testing environment.
-* `setupTestFrameworkScriptFile` - runs code which adds improved support for `Console` object and `React` components to the testing framework before each test.
+* `setupFilesAfterEnv` - runs code which adds improved support for `Console` object and `React` components to the testing framework before each test.
+* `snapshotSerializers` - makes it possible to use snapshot tests on `Enzyme` wrappers.
 * `testMatch`- includes `/test/` subfolder in the glob patterns Jest uses to detect test files. It detects only test files containing `.js` extension.
 * `timers` - use of [fake timers](https://jestjs.io/docs/en/timer-mocks.html) for functions such as `setTimeout` is enabled.
-* `transform` - adds support for [PEG.js]( https://github.com/pegjs/pegjs#javascript-api) transformed necessary for WordPress blocks. It also keeps the default [babel-jest](https://github.com/facebook/jest/tree/master/packages/babel-jest) transformer.
+* `transform` - keeps the default [babel-jest](https://github.com/facebook/jest/tree/master/packages/babel-jest) transformer.
 * `verbose` - each individual test won't be reported during the run.
 
-#### Overriding `setupTestFrameworkScriptFile`
-
-It is also possible to override the script that runs some code to configure or set up the testing framework before each test. To do so you will need to create `setup-test-framework.js` inside your project with the following content:
-
-```js
-// You can still load the default script provided by this setup
-import '@wordpress/jest-preset-default';
-
-// Your code goes here
-```
-
 <br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
diff --git a/packages/jest-preset-default/jest-preset.json b/packages/jest-preset-default/jest-preset.json
@@ -8,15 +8,20 @@
 	"setupFiles": [
 		"<rootDir>/node_modules/@wordpress/jest-preset-default/scripts/setup-globals.js"
 	],
-	"setupTestFrameworkScriptFile": "<rootDir>/node_modules/@wordpress/jest-preset-default/scripts/setup-test-framework.js",
+	"setupFilesAfterEnv": [
+		"<rootDir>/node_modules/@wordpress/jest-preset-default/scripts/setup-test-framework.js"
+	],
+	"snapshotSerializers": [
+		"<rootDir>/node_modules/enzyme-to-json/serializer.js"
+	],
 	"testMatch": [
 		"**/__tests__/**/*.js",
 		"**/?(*.)(spec|test).js",
 		"**/test/*.js"
 	],
 	"timers": "fake",
 	"transform": {
-		"^.+\\.jsx?$": "<rootDir>/node_modules/babel-jest"
+		"^.+\\.[jt]sx?$": "<rootDir>/node_modules/babel-jest"
 	},
 	"verbose": true
 }
diff --git a/packages/jest-preset-default/package.json b/packages/jest-preset-default/package.json
@@ -27,13 +27,13 @@
 	"main": "index.js",
 	"dependencies": {
 		"@wordpress/jest-console": "file:../jest-console",
-		"babel-jest": "^23.6.0",
-		"enzyme": "^3.7.0",
-		"enzyme-adapter-react-16": "^1.6.0",
-		"jest-enzyme": "^6.0.2"
+		"babel-jest": "^24.1.0",
+		"enzyme": "^3.9.0",
+		"enzyme-adapter-react-16": "^1.9.1",
+		"enzyme-to-json": "^3.3.5"
 	},
 	"peerDependencies": {
-		"jest": ">=23"
+		"jest": ">=24"
 	},
 	"publishConfig": {
 		"access": "public"

diff --git a/packages/jest-preset-default/scripts/setup-test-framework.js b/packages/jest-preset-default/scripts/setup-test-framework.js
@@ -14,9 +14,6 @@ jest.mock( 'enzyme', () => {
 		// configure enzyme 3 for React, from docs: http://airbnb.io/enzyme/docs/installation/index.html
 		const Adapter = require.requireActual( 'enzyme-adapter-react-16' );
 		actualEnzyme.configure( { adapter: new Adapter() } );
-
-		// configure assertions for enzyme
-		require.requireActual( 'jest-enzyme' );
 	}
 	return actualEnzyme;
 } );
diff --git a/packages/jest-puppeteer-axe/README.md b/packages/jest-puppeteer-axe/README.md
@@ -14,20 +14,16 @@ npm install @wordpress/jest-puppeteer-axe --save-dev
 
 ### Setup
 
-The simplest setup is to use Jest's `setupTestFrameworkScriptFile` config option:
+The simplest setup is to use Jest's `setupFilesAfterEnv` config option:
 
 ```js
 "jest": {
-  "setupTestFrameworkScriptFile": "./node_modules/@wordpress/jest-puppeteer-axe/build/index.js"
+  "setupFilesAfterEnv": [
+    "@wordpress/jest-puppeteer-axe"
+  ]
 },
 ```
 
-If your project already has a script file which sets up the test framework, you will need the following import statement:
-
-```js
-import '@wordpress/jest-puppeteer-axe';
-```
-
 ## Usage
 
 In your Jest test suite add the following code to the test's body:

diff --git a/packages/jest-puppeteer-axe/package.json b/packages/jest-puppeteer-axe/package.json
@@ -26,10 +26,10 @@
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"dependencies": {
-		"axe-puppeteer": "^0.1.0"
+		"axe-puppeteer": "^1.0.0"
 	},
 	"peerDependencies": {
-		"jest": ">=23",
+		"jest": ">=24",
 		"puppeteer": ">=1.6"
 	},
 	"publishConfig": {

diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md
@@ -3,6 +3,8 @@
 ### Breaking Changes
 
 - The bundled `eslint` dependency has been updated from requiring `^4.19.1` to requiring `^5.12.1` (see [Migration Guide](https://eslint.org/docs/user-guide/migrating-to-5.0.0)).
+- The bundled `jest` dependency has been updated from requiring `^23.6.0` to requiring `^24.1.0` (see [Breaking Changes](https://jestjs.io/blog/2019/01/25/jest-24-refreshing-polished-typescript-friendly#breaking-changes), [#13922](https://github.com/WordPress/gutenberg/pull/13922)).
+- The bundled `jest-puppeteer` dependency has been updated from requiring `3.2.1` to requiring `^4.0.0` ([#13922](https://github.com/WordPress/gutenberg/pull/13922)).
 
 ### New Features
 

diff --git a/packages/scripts/config/jest-e2e.config.js b/packages/scripts/config/jest-e2e.config.js
@@ -19,7 +19,7 @@ const jestE2EConfig = {
 
 if ( ! hasBabelConfig() ) {
 	jestE2EConfig.transform = {
-		'^.+\\.jsx?$': path.join( __dirname, 'babel-transform' ),
+		'^.+\\.[jt]sx?$': path.join( __dirname, 'babel-transform' ),
 	};
 }
 

diff --git a/packages/scripts/config/jest-unit.config.js b/packages/scripts/config/jest-unit.config.js
@@ -14,7 +14,7 @@ const jestUnitConfig = {
 
 if ( ! hasBabelConfig() ) {
 	jestUnitConfig.transform = {
-		'^.+\\.jsx?$': path.join( __dirname, 'babel-transform' ),
+		'^.+\\.[jt]sx?$': path.join( __dirname, 'babel-transform' ),
 	};
 }
 

diff --git a/packages/scripts/package.json b/packages/scripts/package.json
@@ -40,8 +40,8 @@
 		"check-node-version": "^3.1.1",
 		"cross-spawn": "^5.1.0",
 		"eslint": "^5.12.1",
-		"jest": "^23.6.0",
-		"jest-puppeteer": "3.2.1",
+		"jest": "^24.1.0",
+		"jest-puppeteer": "^4.0.0",
 		"npm-package-json-lint": "^3.3.1",
 		"puppeteer": "1.6.1",
 		"read-pkg-up": "^1.0.1",