Jest: Update to version 27 (https://github.com/woocommerce/woocommerce-admin/pull/7430)

Co-authored-by: Lourens Schep <lourensschep@gmail.com>

plugins/woocommerce-admin/changelogs/update-jest-27

@@ -0,0 +1,4 @@
+Significance: patch
+Type: Dev
+
+Update Jest to version 27. #7430

plugins/woocommerce-admin/client/navigation/components/container/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { act, render } from '@testing-library/react';
+import { act, render, waitFor } from '@testing-library/react';
 import { getAdminLink } from '@woocommerce/wc-admin-settings';
 import { getHistory } from '@woocommerce/navigation';
 import { useSelect } from '@wordpress/data';
@@ -155,21 +155,21 @@ describe( 'Container', () => {
 				getAdminLink( 'admin.php?page=wc-admin&path=/child' )
 			);
 			getHistory().push( getAdminLink( '/child' ) );
-
-			await new Promise( ( resolve ) => {
-				setTimeout( () => {
-					resolve();
-				}, 0 );
-			} );
 		} );
 
-		expect(
-			container.querySelector( '.woocommerce-navigation-category-title' )
-				.textContent
-		).toBe( 'Primary Category' );
-		expect(
-			queryByText( 'Primary Child' ).parentElement.parentElement.classList
-		).toContain( 'is-active' );
+		await waitFor( () =>
+			expect(
+				container.querySelector(
+					'.woocommerce-navigation-category-title'
+				).textContent
+			).toBe( 'Primary Category' )
+		);
+		await waitFor( () =>
+			expect(
+				queryByText( 'Primary Child' ).parentElement.parentElement
+					.classList
+			).toContain( 'is-active' )
+		);
 	} );
 
 	test( 'should update the active level when a category is clicked', () => {

plugins/woocommerce-admin/package.json

@@ -148,10 +148,10 @@
 		"@storybook/addon-viewport": "6.2.9",
 		"@storybook/addons": "6.2.9",
 		"@storybook/react": "6.2.9",
-		"@testing-library/jest-dom": "5.12.0",
-		"@testing-library/react": "11.2.7",
-		"@testing-library/react-hooks": "3.7.0",
-		"@testing-library/user-event": "13.1.9",
+		"@testing-library/jest-dom": "5.14.0",
+		"@testing-library/react": "12.0.0",
+		"@testing-library/react-hooks": "7.0.1",
+		"@testing-library/user-event": "13.2.1",
 		"@types/cookie": "0.4.1",
 		"@types/dompurify": "2.2.2",
 		"@types/expect-puppeteer": "4.4.6",
@@ -189,7 +189,7 @@
 		"@wordpress/custom-templated-path-webpack-plugin": "1.7.0",
 		"@wordpress/e2e-test-utils": "4.16.1",
 		"@wordpress/eslint-plugin": "8.0.0",
-		"@wordpress/jest-preset-default": "5.5.0",
+		"@wordpress/jest-preset-default": "7.1.0",
 		"@wordpress/postcss-plugins-preset": "1.6.0",
 		"@wordpress/postcss-themes": "1.0.5",
 		"@wordpress/prettier-config": "0.4.0",
@@ -218,8 +218,9 @@
 		"grunt-checktextdomain": "1.0.1",
 		"grunt-wp-i18n": "1.0.3",
 		"husky": "4.3.8",
-		"jest-24.9.0": "npm:jest@24.9.0",
-		"jest-environment-jsdom-sixteen": "1.0.3",
+		"jest": "27.0.6",
+		"jest-environment-jsdom": "~27.0",
+		"jest-environment-node": "^27.0.6",
 		"lerna": "3.22.1",
 		"lint-staged": "10.5.4",
 		"md5": "2.3.0",
@@ -242,7 +243,7 @@
 		"stylelint": "9.10.1",
 		"stylelint-config-wordpress": "13.1.0",
 		"terser-webpack-plugin": "2.3.8",
-		"ts-jest": "24.3.0",
+		"ts-jest": "27.0.4",
 		"url-loader": "1.1.2",
 		"webpack": "4.43.0",
 		"webpack-bundle-analyzer": "3.6.1",

plugins/woocommerce-admin/packages/components/src/form/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createElement } from '@wordpress/element';
 
@@ -10,14 +10,6 @@ import { createElement } from '@wordpress/element';
  */
 import Form from '../';
 
-// There is async code inside the callback handlers that we must flush
-// before asserting they were called.
-function flushPromises() {
-	return new Promise( function ( resolve ) {
-		setTimeout( resolve );
-	} );
-}
-
 describe( 'Form', () => {
 	it( 'should default to call the deprecated onSubmitCallback if it is provided.', async () => {
 		const onSubmitCallback = jest.fn().mockName( 'onSubmitCallback' );
@@ -37,9 +29,10 @@ describe( 'Form', () => {
 
 		userEvent.click( queryByText( 'Submit' ) );
 
-		await flushPromises();
-		await expect( onSubmitCallback ).toHaveBeenCalledTimes( 1 );
-		await expect( onSubmit ).not.toHaveBeenCalled();
+		await waitFor( () =>
+			expect( onSubmitCallback ).toHaveBeenCalledTimes( 1 )
+		);
+		await waitFor( () => expect( onSubmit ).not.toHaveBeenCalled() );
 	} );
 
 	it( 'should default to call the deprecated onChangeCallback prop if it is provided.', async () => {
@@ -68,9 +61,10 @@ describe( 'Form', () => {
 
 		userEvent.click( queryByText( 'Change' ) );
 
-		await flushPromises();
-		await expect( mockOnChangeCallback ).toHaveBeenCalledTimes( 1 );
-		await expect( mockOnChange ).not.toHaveBeenCalled();
+		await waitFor( () =>
+			expect( mockOnChangeCallback ).toHaveBeenCalledTimes( 1 )
+		);
+		await waitFor( () => expect( mockOnChange ).not.toHaveBeenCalled() );
 	} );
 
 	it( 'should call onSubmit if it is the only prop provided', async () => {
@@ -86,8 +80,9 @@ describe( 'Form', () => {
 
 		userEvent.click( queryByText( 'Submit' ) );
 
-		await flushPromises();
-		await expect( mockOnSubmit ).toHaveBeenCalledTimes( 1 );
+		await waitFor( () =>
+			expect( mockOnSubmit ).toHaveBeenCalledTimes( 1 )
+		);
 	} );
 
 	it( 'should call onChange if it is the only prop provided', async () => {
@@ -111,7 +106,8 @@ describe( 'Form', () => {
 
 		userEvent.click( queryByText( 'Submit' ) );
 
-		await flushPromises();
-		await expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+		await waitFor( () =>
+			expect( mockOnChange ).toHaveBeenCalledTimes( 1 )
+		);
 	} );
 } );

plugins/woocommerce-admin/packages/experimental/src/vertical-css-transition/test/vertical-css-transition.tsx

@@ -36,14 +36,14 @@ describe( 'VerticalCSSTransition', () => {
 
 	it( 'should set maxHeight of children to container on entering and remove it when entered', ( done ) => {
 		const nodeRef = createRef< undefined | HTMLDivElement >();
-		let count = 0;
+		let onEnteringCalledCount = 0;
 		const props: VerticalCSSTransitionProps = {
 			in: false,
 			timeout: 0,
 			nodeRef: nodeRef as React.RefObject< undefined >,
 			classNames: 'test',
 			onEntering: () => {
-				count++;
+				onEnteringCalledCount++;
 				expect(
 					nodeRef.current &&
 						nodeRef.current.parentElement?.style.maxHeight
@@ -54,7 +54,7 @@ describe( 'VerticalCSSTransition', () => {
 					nodeRef.current &&
 						nodeRef.current.parentElement?.style.maxHeight
 				).toBe( '' );
-				expect( count ).toEqual( 1 );
+				expect( onEnteringCalledCount ).toEqual( 1 );
 				done();
 			},
 		};
@@ -65,6 +65,7 @@ describe( 'VerticalCSSTransition', () => {
 				</div>
 			</VerticalCSSTransition>
 		);
+		jest.runOnlyPendingTimers();
 
 		rerender(
 			<VerticalCSSTransition { ...props } in={ true }>
@@ -73,18 +74,19 @@ describe( 'VerticalCSSTransition', () => {
 				</div>
 			</VerticalCSSTransition>
 		);
+		jest.runOnlyPendingTimers();
 	} );
 
 	it( 'should update maxHeight when children are updated', ( done ) => {
 		const nodeRef = createRef< undefined | HTMLDivElement >();
-		let count = 0;
+		let onEnteringCalledCount = 0;
 		const props: VerticalCSSTransitionProps = {
 			in: false,
 			timeout: 0,
 			nodeRef: nodeRef as React.RefObject< undefined >,
 			classNames: 'test',
 			onEntering: () => {
-				count++;
+				onEnteringCalledCount++;
 				expect(
 					nodeRef.current &&
 						nodeRef.current.parentElement?.style.maxHeight
@@ -95,7 +97,7 @@ describe( 'VerticalCSSTransition', () => {
 					nodeRef.current &&
 						nodeRef.current.parentElement?.style.maxHeight
 				).toBe( '' );
-				expect( count ).toEqual( 1 );
+				expect( onEnteringCalledCount ).toEqual( 1 );
 				done();
 			},
 		};
@@ -106,6 +108,7 @@ describe( 'VerticalCSSTransition', () => {
 				</div>
 			</VerticalCSSTransition>
 		);
+		jest.runOnlyPendingTimers();
 
 		rerender(
 			<VerticalCSSTransition { ...props } in={ true }>
@@ -118,6 +121,7 @@ describe( 'VerticalCSSTransition', () => {
 		expect(
 			nodeRef.current && nodeRef.current.parentElement?.style.maxHeight
 		).toBe( '200px' );
+		jest.runOnlyPendingTimers();
 	} );
 
 	it( 'should set maxHeight to zero if in is set to false', () => {

plugins/woocommerce-admin/packages/js-tests/jest.config.js

@@ -39,7 +39,7 @@ module.exports = {
 	transform: {
 		'^.+\\.[jt]sx?$': 'ts-jest',
 	},
-	testEnvironment: 'jest-environment-jsdom-sixteen',
+	testEnvironment: 'jest-environment-jsdom',
 	timers: 'modern',
 	verbose: true,
 };