Bump Jest version to v27 #4499

fluiddot · 2022-01-21T10:09:10Z

Related to WordPress/gutenberg#38133.

This PR bumps the Jest package version to v27 to match the same version in Gutenberg, which was recently updated in WordPress/gutenberg#33287.

Additionally, it updates the unit tests located in GB-mobile in order to prevent failures with the update.

To test:

Automated tests

Check that all PR checks pass, especially the Android, iOS device tests, and unit tests.

Manual tests

Run command npm run test:e2e:android:local.
Observe that Android device tests pass.
Run command npm run test:e2e:ios:local.
Observe that iOS device tests pass.
Run command npm run test.
Observe that unit tests pass.

PR submission checklist:

I have considered adding unit tests where possible.
I have considered if this change warrants user-facing release notes more info and have added them to RELEASE-NOTES.txt if necessary.

fluiddot · 2022-01-21T10:11:08Z

package.json

-		"jest": "^24.9.0",
-		"jest-junit": "^6.3.0",
+		"jest": "^27.4.5",
+		"jest-junit": "^13.0.0",


These versions match the values from Gutenberg's package.json file:
https://github.com/WordPress/gutenberg/blob/5a84b27bcead1528ca98bcade9c6d5259c70de7b/package.json#L178-L179

fluiddot · 2022-01-21T10:12:18Z

package.json

-		"babel-jest": "^24.9.0",
+		"babel-jest": "^27.4.5",


This version matches the value from Gutenberg's package.json file:
https://github.com/WordPress/gutenberg/blob/5a84b27bcead1528ca98bcade9c6d5259c70de7b/package.json#L151

fluiddot · 2022-01-21T10:14:38Z

Changing the PR to draft as it requires further modifications to fix the unit tests 🔧 .

It's not longer required to isolate modules for registering jetpack blocks.

peril-wordpress-mobile · 2022-01-21T12:31:04Z

Wanna run full suite of Android and iOS UI tests? Click here and 'Approve' CI job!

fluiddot · 2022-01-21T12:38:26Z

src/index.js

-registerGutenberg( {
-	beforeInitCallback: () => {
-		// We have to lazy import the setup code to prevent executing any code located
-		// at global scope before the editor is initialized, like translations retrieval.
-		require( './setup' ).default();
+export default function registerGutenbergMobile() {


I had to expose the register function mainly for testing purposes, so we can initialize Gutenberg Mobile on each test without having to reimport the module.

fluiddot · 2022-01-21T13:49:09Z

I noticed that Android device tests are failing with the following error:

Error: EACCES: permission denied, open '/home/circleci/project/junit.xml'

I'll take a deeper look but I have the gut feeling that after the Jest upgrade, we might need to reconfigure how/where CircleCI fetches the test results.

fluiddot · 2022-01-21T14:02:40Z

jest.config.js

@@ -26,7 +26,6 @@ module.exports = {
 	clearMocks: true,
 	preset: './gutenberg/node_modules/react-native/jest-preset.js',
 	setupFiles: [ '<rootDir>/' + configPath + '/setup.js' ],
-	testEnvironment: 'jsdom',


Now we use node environment which is now the default value (reference).

fluiddot · 2022-01-21T14:03:54Z

src/test/index.js

+const setupLocaleLogs = [
+	[ 'locale', defaultLocale, getGutenbergTranslation( defaultLocale ) ],
+	[
+		'jetpack - locale',
+		defaultLocale,
+		getJetpackTranslation( defaultLocale ),
+	],
+	[
+		'layout-grid - locale',
+		defaultLocale,
+		getLayoutGridTranslation( defaultLocale ),
+	],
+];


These logs correspond to the setup locale logs triggered from here.

Not for this PR, but what do you think about refactoring all of our intentional logs to reside behind a ENABLE_LOGGING environment flag? E.g. ENABLE_LOGGING=true npm run start:quick.

Whether to add a log message is often left to each contributor to decide what subject reaches the threshold of deserving a log message. Ultimately, the project will likely arrive at a point where there are so many logs that it becomes difficult to parse important warnings or errors.

AFAIK, we don't display too many informational logs, apart from the locale/translations ones, but in any case, I like your idea about providing an option for enabling/disabling logs. As you mentioned, it would help us on identifying important messages like warnings and errors 👍.

fluiddot · 2022-01-21T14:10:20Z

src/test/index.js

-	jest.isolateModules( () => {
-		// Import entry point to initialize the editor
-		require( '../index' );
-	} );
-	return render( <EditorComponent { ...props } /> );
+	registerGutenbergMobile();


After running several tests, I noticed that now using isolateModules when rendering the editor causes failures. As far as I investigated, it duplicates the Redux stores, in my case I verified it was creating two different stores for @wordpress/blocks. This leads to a scenario where blocks are registered into the second store but the editor complains about the lack of blocks (most likely because it's accessing the first one).

For this reason, I decided to stop using the workaround of isolating modules for registering Gutenberg on each test, and instead export the register function and call it here.

fluiddot · 2022-01-21T14:14:41Z

src/test/jetpack-editor-setup.js

-// Jetpack blocks are registered when importing the editor extension module.
-// Since we need to register the blocks multiple times for testing,
-// it's required to isolate modules for re-importing the editor extension multiple times.
-const registerJetpackBlocksIsolated = ( props ) => {
-	jest.isolateModules( () => {
-		registerJetpackBlocks( props );
-	} );
-};
-// Similarly to Jetpack blocks, Jetpack embed variations also require to isolate modules.
-const registerJetpackEmbedVariationsIsolated = ( props ) => {
-	jest.isolateModules( () => {
-		registerJetpackEmbedVariations( props );
-	} );
-};


For the same reason as outlined in this comment, I removed the use of isolateModules. In this case, the main purpose of using this function was to assure that Jetpack/Layout-grid blocks are registered on each test, as they are registered upon module importation. However, I realized after removing that function that it's no longer required to isolate the modules, as blocks are registered on every test.

fluiddot · 2022-01-21T14:22:31Z

I noticed that Android device tests are failing with the following error:
Error: EACCES: permission denied, open '/home/circleci/project/junit.xml'
I'll take a deeper look but I have the gut feeling that after the Jest upgrade, we might need to reconfigure how/where CircleCI fetches the test results.

I found out that the environment variable used for specifying the output file of Jest-unit (i.e. JEST_JUNIT_OUTPUT), is not listed in the documentation of the package (reference). The package has been upgraded from version 6.3.0 to 13.0.0, and I noticed that on version 8.0.0 it was renamed (reference). I'll update the CircleCI configuration to use JEST_JUNIT_OUTPUT_FILE instead.

dcalhoun

🚀 LGTM. Thank you for putting this work together. 👏🏻

I attempted to verify the e2e tests locally, but ran in to a fair amount of flakiness and unrelated build errors, unfortunately. Provided the CI tests pass, I think we are good to go. 👍🏻

dcalhoun · 2022-01-21T15:08:06Z

src/test/index.js

+const setupLocaleLogs = [
+	[ 'locale', defaultLocale, getGutenbergTranslation( defaultLocale ) ],
+	[
+		'jetpack - locale',
+		defaultLocale,
+		getJetpackTranslation( defaultLocale ),
+	],
+	[
+		'layout-grid - locale',
+		defaultLocale,
+		getLayoutGridTranslation( defaultLocale ),
+	],
+];


Not for this PR, but what do you think about refactoring all of our intentional logs to reside behind a ENABLE_LOGGING environment flag? E.g. ENABLE_LOGGING=true npm run start:quick.

Whether to add a log message is often left to each contributor to decide what subject reaches the threshold of deserving a log message. Ultimately, the project will likely arrive at a point where there are so many logs that it becomes difficult to parse important warnings or errors.

fluiddot · 2022-01-21T16:32:59Z

I confirm that all device tests are 🟢 after running the optional ones:

fluiddot added 2 commits January 21, 2022 11:04

Bump Jest version to v27

a39b60c

Revert wrong prettier package in package-lock.json

d000016

fluiddot added the dependencies Pull requests that update a dependency file label Jan 21, 2022

fluiddot added this to the 1.71.0 (19.2) milestone Jan 21, 2022

fluiddot self-assigned this Jan 21, 2022

fluiddot commented Jan 21, 2022

View reviewed changes

fluiddot requested a review from dcalhoun January 21, 2022 10:12

fluiddot marked this pull request as draft January 21, 2022 10:13

fluiddot removed the request for review from dcalhoun January 21, 2022 10:13

fluiddot added 5 commits January 21, 2022 13:23

Use default jest environment

3991c82

Remove unused jest config property

be8113d

Update jetpack editor setup tests

6ea14fb

It's not longer required to isolate modules for registering jetpack blocks.

Update Gutenberg ref

e0daf25

Refactor gb-mobile tests

d53be70

fluiddot commented Jan 21, 2022

View reviewed changes

fluiddot marked this pull request as ready for review January 21, 2022 12:38

fluiddot requested review from dcalhoun and geriux January 21, 2022 12:39

fluiddot commented Jan 21, 2022

View reviewed changes

fluiddot added 3 commits January 21, 2022 15:23

Rename jest-junit output env variable

3e27bcb

Update Gutenberg ref

8b3d612

Update editor rendering test case

3d93d49

dcalhoun approved these changes Jan 21, 2022

View reviewed changes

Update Gutenberg ref with merge commit

7273f34

fluiddot merged commit 6169e94 into develop Jan 21, 2022

fluiddot deleted the update/bump-jest-version-v27 branch January 21, 2022 17:02

fluiddot mentioned this pull request Jan 21, 2022

[RNMobile] Remove trailing whitespace from strings #4496

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bump Jest version to v27 #4499

Bump Jest version to v27 #4499

fluiddot commented Jan 21, 2022 •

edited

Loading

fluiddot Jan 21, 2022 •

edited

Loading

fluiddot Jan 21, 2022

fluiddot commented Jan 21, 2022

peril-wordpress-mobile bot commented Jan 21, 2022 •

edited

Loading

fluiddot Jan 21, 2022

fluiddot commented Jan 21, 2022

fluiddot Jan 21, 2022

fluiddot Jan 21, 2022

dcalhoun Jan 21, 2022

fluiddot Jan 21, 2022

fluiddot Jan 21, 2022

fluiddot Jan 21, 2022

fluiddot commented Jan 21, 2022

dcalhoun left a comment

dcalhoun Jan 21, 2022

fluiddot commented Jan 21, 2022

Bump Jest version to v27 #4499

Bump Jest version to v27 #4499

Conversation

fluiddot commented Jan 21, 2022 • edited Loading

Automated tests

Manual tests

fluiddot Jan 21, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fluiddot commented Jan 21, 2022

peril-wordpress-mobile bot commented Jan 21, 2022 • edited Loading

Choose a reason for hiding this comment

fluiddot commented Jan 21, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fluiddot commented Jan 21, 2022

dcalhoun left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fluiddot commented Jan 21, 2022

fluiddot commented Jan 21, 2022 •

edited

Loading

fluiddot Jan 21, 2022 •

edited

Loading

peril-wordpress-mobile bot commented Jan 21, 2022 •

edited

Loading