Jest Preset: Major version upgrade for Jest in all packages (#20766)

* Jest Preset: Major version upgrade for Jest in all packages * Try porting ToolbarGroup tests to React Testing Library * Tests: Refactor tests to use React Testing Library * Tests: Refactor TabbableContainer tests to use React Testing Library * Tests: Refactor NavigableMenu tests to use React Testing Library * Tests: Refactor Sandbox test to use React Testing Library * Tests: Remove @testing-library/jest-dom and use default matchers * Tests: Remove accidental MutationObserver override * Tests: MutationObserver mock for Sandbox test * Tests: Refactor simulateVisible to work like previously * Update CHANGELOG entries related to Jest upgrade * Update CHANGELOG.md * Update @testing-library/react to the latest version * Tests: Remove MutationObserver mock from Storyshots
WordPress · Apr 9, 2020 · 5eaa211 · 5eaa211
1 parent e8e5520
commit 5eaa211
Show file tree

Hide file tree

Showing 19 changed files with 6,499 additions and 4,814 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -78,6 +78,7 @@
 		"@babel/plugin-syntax-jsx": "7.8.3",
 		"@babel/runtime-corejs3": "7.8.3",
 		"@babel/traverse": "7.8.3",
+		"@jest/types": "25.3.0",
 		"@octokit/rest": "16.26.0",
 		"@octokit/webhooks": "7.1.0",
 		"@storybook/addon-a11y": "5.3.2",
@@ -87,8 +88,7 @@
 		"@storybook/addon-storysource": "5.3.2",
 		"@storybook/addon-viewport": "5.3.2",
 		"@storybook/react": "5.3.2",
-		"@testing-library/react": "9.4.1",
-		"@types/jest": "24.0.25",
+		"@testing-library/react": "10.0.2",
 		"@types/lodash": "4.14.149",
 		"@types/prettier": "1.19.0",
 		"@types/qs": "6.9.1",
@@ -133,20 +133,20 @@
 		"css-loader": "3.2.0",
 		"cssnano": "4.1.10",
 		"deep-freeze": "0.0.1",
-		"enzyme": "3.9.0",
+		"enzyme": "3.11.0",
 		"eslint-plugin-eslint-comments": "3.1.2",
 		"eslint-plugin-import": "2.20.2",
-		"execa": "3.4.0",
+		"execa": "4.0.0",
 		"fast-glob": "2.2.7",
 		"fbjs": "0.8.17",
 		"glob": "7.1.2",
 		"husky": "3.0.5",
-		"inquirer": "7.0.3",
+		"inquirer": "7.1.0",
 		"is-equal-shallow": "0.1.3",
-		"jest-emotion": "10.0.17",
-		"jest-junit": "6.4.0",
+		"jest-emotion": "10.0.32",
+		"jest-junit": "10.0.0",
 		"jest-serializer-enzyme": "1.0.0",
-		"jsdom": "11.12.0",
+		"jsdom": "15.2.1",
 		"lerna": "3.18.2",
 		"lint-staged": "9.2.5",
 		"lodash": "4.17.15",
@@ -165,7 +165,7 @@
 		"react-dom": "16.9.0",
 		"react-native": "0.61.5",
 		"react-test-renderer": "16.9.0",
-		"rimraf": "2.6.2",
+		"rimraf": "3.0.2",
 		"rtlcss": "2.4.0",
 		"sass-loader": "6.0.7",
 		"semver": "6.0.0",

diff --git a/packages/README.md b/packages/README.md
@@ -78,8 +78,8 @@ _Example:_
                 "check-node-version": "^3.1.1",
                 "cross-spawn": "^5.1.0",
                 "eslint": "^6.8.0",
--               "jest": "^24.7.1",
-                "jest-puppeteer": "^4.0.0",
+-               "jest": "^25.3.0",
+                "jest-puppeteer": "^4.4.0",
                 "minimist": "^1.2.0",
                 "npm-package-json-lint": "^3.6.0",
 ```
@@ -89,9 +89,8 @@ Next, you need to run `npm install` in the root of the project to ensure that `p
 #### Updating Existing Dependencies
 
 This is the most confusing part of working with [lerna] which causes a lot of hassles for contributors. The most successful strategy so far is to do the following:
-
-1.  First, remove the existing dependency as described in the previous section.
-2.  Next, add the same dependency back as described in the first section of this chapter. This time it wil get the latest version applied unless you enforce a different version explicitly.
+ 1. First, remove the existing dependency as described in the previous section.
+ 2. Next, add the same dependency back as described in the first section of this chapter. This time it wil get the latest version applied unless you enforce a different version explicitly.
 
 ### Development Dependencies
 

diff --git a/packages/components/src/higher-order/with-focus-return/test/index.js b/packages/components/src/higher-order/with-focus-return/test/index.js
@@ -2,12 +2,12 @@
  * External dependencies
  */
 import renderer from 'react-test-renderer';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 /**
  * WordPress dependencies
  */
-import { Component, createElement } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -29,12 +29,8 @@ describe( 'withFocusReturn()', () => {
 		const Composite = withFocusReturn( Test );
 		const activeElement = document.createElement( 'button' );
 		const switchFocusTo = document.createElement( 'input' );
-
-		const getInstance = ( wrapper ) => {
-			return wrapper.root.find(
-				( node ) => node.instance instanceof Component
-			).instance;
-		};
+		document.body.appendChild( activeElement );
+		document.body.appendChild( switchFocusTo );
 
 		beforeEach( () => {
 			activeElement.focus();
@@ -74,72 +70,78 @@ describe( 'withFocusReturn()', () => {
 		} );
 
 		it( 'should not switch focus back to the bound focus element', () => {
-			const mountedComposite = renderer.create( <Composite /> );
-
-			expect( getInstance( mountedComposite ).activeElementOnMount ).toBe(
-				activeElement
-			);
+			const { unmount } = render( <Composite />, {
+				container: document.body.appendChild(
+					document.createElement( 'div' )
+				),
+			} );
 
 			// Change activeElement.
 			switchFocusTo.focus();
 			expect( document.activeElement ).toBe( switchFocusTo );
 
 			// Should keep focus on switchFocusTo, because it is not within HOC.
-			mountedComposite.unmount();
+			unmount();
 			expect( document.activeElement ).toBe( switchFocusTo );
 		} );
 
 		it( 'should switch focus back when unmounted while having focus', () => {
-			const wrapper = mount( <Composite /> );
-			wrapper
-				.find( 'textarea' )
-				.at( 0 )
-				.simulate( 'focus' );
+			const { container, unmount } = render( <Composite />, {
+				container: document.body.appendChild(
+					document.createElement( 'div' )
+				),
+			} );
+
+			const textarea = container.querySelector( 'textarea' );
+			textarea.focus();
+			expect( document.activeElement ).toBe( textarea );
 
 			// Should return to the activeElement saved with this component.
-			wrapper.unmount();
+			unmount();
 			expect( document.activeElement ).toBe( activeElement );
 		} );
 
 		it( 'should switch focus to the most recent still-available focus target', () => {
-			const container = document.createElement( 'div' );
-			document.body.appendChild( container );
-			const wrapper = mount(
-				createElement(
-					( props ) => (
-						<Provider>
-							<input name="first" />
-							{ props.renderSecondInput && (
-								<input name="second" />
-							) }
-							{ props.renderComposite && <Composite /> }
-						</Provider>
+			const TestComponent = ( props ) => (
+				<Provider>
+					<input name="first" />
+					{ props.renderSecondInput && <input name="second" /> }
+					{ props.renderComposite && <Composite /> }
+				</Provider>
+			);
+
+			const { container, rerender } = render(
+				<TestComponent renderSecondInput />,
+				{
+					container: document.body.appendChild(
+						document.createElement( 'div' )
 					),
-					{ renderSecondInput: true }
-				),
-				{ attachTo: container }
+				}
 			);
 
-			function focus( selector ) {
-				const childWrapper = wrapper.find( selector );
-				const childNode = childWrapper.getDOMNode();
-				childWrapper.simulate( 'focus', { target: childNode } );
-			}
+			const firstInput = container.querySelector( 'input[name="first"]' );
+			firstInput.focus();
 
-			focus( 'input[name="first"]' );
-			jest.spyOn(
-				wrapper.find( 'input[name="first"]' ).getDOMNode(),
-				'focus'
+			const secondInput = container.querySelector(
+				'input[name="second"]'
 			);
-			focus( 'input[name="second"]' );
-			wrapper.setProps( { renderComposite: true } );
-			focus( 'textarea' );
-			wrapper.setProps( { renderSecondInput: false } );
-			wrapper.setProps( { renderComposite: false } );
-
-			expect(
-				wrapper.find( 'input[name="first"]' ).getDOMNode().focus
-			).toHaveBeenCalled();
+			secondInput.focus();
+
+			expect( document.activeElement ).toBe( secondInput );
+
+			rerender( <TestComponent renderSecondInput renderComposite /> );
+			const textarea = container.querySelector( 'textarea' );
+			textarea.focus();
+
+			expect( document.activeElement ).toBe( textarea );
+
+			rerender( <TestComponent renderComposite /> );
+
+			expect( document.activeElement ).toBe( textarea );
+
+			rerender( <TestComponent /> );
+
+			expect( document.activeElement ).toBe( firstInput );
 		} );
 	} );
 } );