Use Jest version 27.0.1

See release notes: https://jestjs.io/blog/2021/05/25/jest-27 There is currently one issue with global `afterEach` callbacks order which I workarounded by using `afterAll` (see: jestjs/jest#11456). I will wait for the resolution of that issue and update our code accordingly.
adeira · May 26, 2021 · 9261567 · 9261567
1 parent 9692d1a
commit 9261567
Show file tree

Hide file tree

Showing 33 changed files with 804 additions and 529 deletions.
diff --git a/.jest.config.js b/.jest.config.js
@@ -27,7 +27,7 @@ const commonProjectConfig = {
   transform: {
     '^.+\\.js$': 'babel-jest',
   },
-  timers: 'fake',
+  timers: 'legacy', // TODO: migrate to the Jest default values!
 };
 
 function tryToLoadWorkspaceConfig(configPath /*: string */) /*: Object */ {
@@ -45,6 +45,7 @@ module.exports = {
   reporters: ['default'],
   rootDir: __dirname,
   verbose: false,
+  testEnvironment: 'node',
   setupFilesAfterEnv: commonProjectConfig.setupFilesAfterEnv, // specified here so it triggers all tests to run if changed.
   projects: Workspaces.getWorkspacesSync().map((packageJSONLocation) => {
     const packageJSON = require(packageJSONLocation);

diff --git a/package.json b/package.json
@@ -15,12 +15,12 @@
     "@babel/cli": "^7.14.3",
     "@babel/core": "^7.14.3",
     "@babel/eslint-parser": "^7.14.3",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^27.0.1",
     "babel-loader": "^8.2.2",
     "eslint": "^7.27.0",
     "flow-bin": "^0.151.0",
     "glob": "^7.1.7",
-    "jest": "^26.6.3",
+    "jest": "^27.0.1",
     "jest-runner-eslint": "^0.10.0"
   },
   "jest": {

diff --git a/scripts/jest/setupTests.js b/scripts/jest/setupTests.js
@@ -47,6 +47,7 @@ const isSpy = (spy: MaybeSpy): boolean %checks => {
 };
 
 // TODO: .toWarnDev() ?
+// Inspired by React itself: https://github.com/facebook/react/blob/7841d0695ae4bde9848cf8953baf34d312d0cced/scripts/jest/setupTests.js
 ['error', 'warn', 'log', 'info', 'groupCollapsed'].forEach((methodName) => {
   const unexpectedConsoleCallStacks = [];
   const newMethod = function (format, ...args) {
@@ -60,11 +61,13 @@ const isSpy = (spy: MaybeSpy): boolean %checks => {
   // $FlowExpectedError[cannot-write]: these properties are not normally writable but it's expected in this case
   console[methodName] = newMethod;
 
-  global.beforeEach(() => {
+  // TODO: which back to beforeEach, see https://github.com/facebook/jest/issues/11456
+  global.beforeAll(() => {
     unexpectedConsoleCallStacks.length = 0;
   });
 
-  global.afterEach(() => {
+  // TODO: which back to afterEach, see https://github.com/facebook/jest/issues/11456
+  global.afterAll(() => {
     if (console[methodName] !== newMethod && !isSpy(console[methodName])) {
       throw new Error(
         `Test did not tear down console.${methodName} mock properly. Did you call spy.mockRestore() or jest.restoreAllMocks()?`,

diff --git a/src/abacus-backoffice/src/forms/__tests__/FormMultiSelect.test.js b/src/abacus-backoffice/src/forms/__tests__/FormMultiSelect.test.js
@@ -1,4 +1,7 @@
-// @flow
+/**
+ * @flow
+ * @jest-environment jsdom
+ */
 
 import * as React from 'react';
 import fbt from 'fbt';

diff --git a/src/abacus-backoffice/src/forms/__tests__/FormMultiUpload.test.js b/src/abacus-backoffice/src/forms/__tests__/FormMultiUpload.test.js
@@ -1,4 +1,7 @@
-// @flow
+/**
+ * @flow
+ * @jest-environment jsdom
+ */
 
 import * as React from 'react';
 import fbt from 'fbt';

diff --git a/src/abacus-backoffice/src/forms/__tests__/FormNumber.test.js b/src/abacus-backoffice/src/forms/__tests__/FormNumber.test.js
@@ -1,4 +1,7 @@
-// @flow
+/**
+ * @flow
+ * @jest-environment jsdom
+ */
 
 import * as React from 'react';
 import fbt from 'fbt';

diff --git a/src/abacus-backoffice/src/forms/__tests__/FormText.test.js b/src/abacus-backoffice/src/forms/__tests__/FormText.test.js
@@ -1,4 +1,7 @@
-// @flow
+/**
+ * @flow
+ * @jest-environment jsdom
+ */
 
 import * as React from 'react';
 import fbt from 'fbt';

diff --git a/src/abacus-backoffice/src/forms/__tests__/FormTextArea.test.js b/src/abacus-backoffice/src/forms/__tests__/FormTextArea.test.js
@@ -1,4 +1,7 @@
-// @flow
+/**
+ * @flow
+ * @jest-environment jsdom
+ */
 
 import * as React from 'react';
 import fbt from 'fbt';

diff --git a/src/abacus-backoffice/src/pos/recoil/__tests__/selectedItemsState.test.js b/src/abacus-backoffice/src/pos/recoil/__tests__/selectedItemsState.test.js
@@ -1,4 +1,7 @@
-// @flow
+/**
+ * @flow
+ * @jest-environment jsdom
+ */
 
 import { renderHook, act } from '@testing-library/react-hooks';
 import { RecoilRoot } from 'recoil';

diff --git a/src/eslint-fixtures-tester/package.json b/src/eslint-fixtures-tester/package.json
@@ -13,7 +13,7 @@
     "@babel/eslint-parser": "^7.14.3",
     "@babel/runtime": "^7.14.0",
     "eslint": "^7.27.0",
-    "jest-docblock": "^26.0.0"
+    "jest-docblock": "^27.0.1"
   },
   "peerDependencies": {
     "eslint": "^7.27.0"

diff --git a/src/example-relay/package.json b/src/example-relay/package.json
@@ -31,10 +31,10 @@
     "@adeira/babel-preset-adeira": "^3.0.0",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.7",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^27.0.1",
     "flow-bin": "^0.151.0",
     "graphql": "^15.5.0",
-    "jest": "^26.6.3",
+    "jest": "^27.0.1",
     "react-test-renderer": "^17.0.2",
     "relay-test-utils": "^11.0.2"
   },

diff --git a/src/example-relay/scripts/jest/custom-transformer.js b/src/example-relay/scripts/jest/custom-transformer.js
@@ -1,7 +1,7 @@
 // @flow
 
 const path = require('path');
-const babelJest = require('babel-jest');
+const babelJest = require('babel-jest').default; // https://github.com/facebook/jest/issues/11444
 
 module.exports = (babelJest.createTransformer(
   require(path.join(__dirname, '..', '..', '.babelrc.js')),

diff --git a/src/example-relay/src/mutations/RangeAdd/__tests__/RangeAdd.test.js b/src/example-relay/src/mutations/RangeAdd/__tests__/RangeAdd.test.js
@@ -1,4 +1,7 @@
-// @flow
+/**
+ * @flow
+ * @jest-environment jsdom
+ */
 
 import { createMockEnvironment, MockPayloadGenerator } from 'relay-test-utils';
 import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';

diff --git a/src/fetch/package.json b/src/fetch/package.json
@@ -14,6 +14,7 @@
     "cross-fetch": "^3.1.4"
   },
   "devDependencies": {
-    "@sinonjs/fake-timers": "^7.1.0"
+    "@sinonjs/fake-timers": "^7.1.0",
+    "form-data": "^4.0.0"
   }
 }
diff --git a/src/fetch/src/__tests__/fetchWithRetries.FormData.test.js b/src/fetch/src/__tests__/fetchWithRetries.FormData.test.js
@@ -1,5 +1,7 @@
 // @flow
 
+import FormData from 'form-data';
+
 import fetch from '../fetch';
 import fetchWithRetries from '../fetchWithRetries';
 import flushPromises from './_flushPromises';

diff --git a/src/js/src/__tests__/isBrowser.test.js b/src/js/src/__tests__/isBrowser.test.js
@@ -1,7 +1,7 @@
 /**
- * @jest-environment  jsdom
+ * @flow strict
+ * @jest-environment jsdom
  */
-// @flow strict
 
 import isBrowser from '../isBrowser';
 

diff --git a/src/relay/src/__tests__/helpers.getRequestBody.test.js b/src/relay/src/__tests__/helpers.getRequestBody.test.js
@@ -1,4 +1,7 @@
-// @flow
+/**
+ * @flow
+ * @jest-environment jsdom
+ */
 
 import { getRequestBody } from '../helpers';
 

diff --git a/src/sx-design/src/ErrorBoundary/__tests__/ErrorBoundary.test.js b/src/sx-design/src/ErrorBoundary/__tests__/ErrorBoundary.test.js
@@ -1,4 +1,7 @@
-// @flow
+/**
+ * @flow
+ * @jest-environment jsdom
+ */
 
 import * as React from 'react';
 import { render, fireEvent } from '@testing-library/react';

diff --git a/src/sx-design/src/Heading/__tests__/Heading.test.js b/src/sx-design/src/Heading/__tests__/Heading.test.js
@@ -1,4 +1,7 @@
-// @flow
+/**
+ * @flow
+ * @jest-environment jsdom
+ */
 
 import * as React from 'react';
 import { render } from '@testing-library/react';

diff --git a/src/sx-design/src/Image/__tests__/Image.test.js b/src/sx-design/src/Image/__tests__/Image.test.js
@@ -1,4 +1,7 @@
-// @flow
+/**
+ * @flow
+ * @jest-environment jsdom
+ */
 
 import React from 'react';
 import { render } from '@testing-library/react';

diff --git a/src/sx-design/src/Kbd/__tests__/Kbd.test.js b/src/sx-design/src/Kbd/__tests__/Kbd.test.js
@@ -1,6 +1,8 @@
-// @flow
+/**
+ * @flow
+ * @jest-environment jsdom
+ */
 
-import * as deviceDetect from 'react-device-detect';
 import * as React from 'react';
 import { invariant } from '@adeira/js';
 import { render } from '@testing-library/react';
@@ -19,8 +21,9 @@ test.each`
     let Kbd;
     jest.isolateModules(() => {
       // https://github.com/duskload/react-device-detect/blob/161b62d7f46a5b810b7a5677985e340f93468e32/README.md#testing
-      // eslint-disable-next-line no-import-assign
+      const deviceDetect = require('react-device-detect');
       deviceDetect.isMacOs = isMacOs;
+
       Kbd = require('../Kbd').default;
     });
 

diff --git a/src/sx-design/src/Link/__tests__/Link.test.js b/src/sx-design/src/Link/__tests__/Link.test.js
@@ -1,4 +1,7 @@
-// @flow
+/**
+ * @flow
+ * @jest-environment jsdom
+ */
 
 import { render } from '@testing-library/react';
 import React from 'react';

diff --git a/src/sx-design/src/Money/__tests__/Money.test.js b/src/sx-design/src/Money/__tests__/Money.test.js
@@ -1,4 +1,7 @@
-// @flow
+/**
+ * @flow
+ * @jest-environment jsdom
+ */
 
 import * as React from 'react';
 import { render } from '@testing-library/react';

diff --git a/src/sx-design/src/Note/__tests__/Note.test.js b/src/sx-design/src/Note/__tests__/Note.test.js
@@ -1,4 +1,7 @@
-// @flow
+/**
+ * @flow
+ * @jest-environment jsdom
+ */
 
 import { render } from '@testing-library/react';
 import React from 'react';

diff --git a/src/sx-design/src/ProductCard/__tests__/ProductCard.test.js b/src/sx-design/src/ProductCard/__tests__/ProductCard.test.js
@@ -1,4 +1,7 @@
-// @flow
+/**
+ * @flow
+ * @jest-environment jsdom
+ */
 
 import { render } from '@testing-library/react';
 import React from 'react';

diff --git a/src/sx-jest-snapshot-serializer/__tests__/serializer.test.js b/src/sx-jest-snapshot-serializer/__tests__/serializer.test.js
@@ -1,4 +1,7 @@
-// @flow
+/**
+ * @flow
+ * @jest-environment jsdom
+ */
 
 import sx from '@adeira/sx';
 import TestRenderer from 'react-test-renderer';

diff --git a/src/sx-jest-snapshot-serializer/index.js b/src/sx-jest-snapshot-serializer/index.js
@@ -2,7 +2,7 @@
 
 import { __internal as __sxInternal } from '@adeira/sx';
 import prettier from 'prettier';
-import prettyFormat from 'pretty-format';
+import { format as prettyFormat, plugins } from 'pretty-format';
 
 /* global window */
 
@@ -20,9 +20,10 @@ expect.addSnapshotSerializer({
       { parser: 'css' },
     );
 
+    const { DOMElement, ReactTestComponent } = plugins;
     const printedHTML = prettier.format(
       prettyFormat(val, {
-        plugins: [prettyFormat.plugins.DOMElement, prettyFormat.plugins.ReactTestComponent],
+        plugins: [DOMElement, ReactTestComponent],
         printFunctionName: false,
       }),
       { parser: 'html' },

diff --git a/src/sx-jest-snapshot-serializer/package.json b/src/sx-jest-snapshot-serializer/package.json
@@ -12,7 +12,7 @@
     "@adeira/sx": "^0.25.0",
     "@babel/runtime": "^7.14.0",
     "prettier": "^2.3.0",
-    "pretty-format": "^26.6.2"
+    "pretty-format": "^27.0.1"
   },
   "devDependencies": {
     "@testing-library/react": "^11.2.7",

diff --git a/src/sx/src/__tests__/SxDomTests.test.js b/src/sx/src/__tests__/SxDomTests.test.js
@@ -1,4 +1,7 @@
-// @flow
+/**
+ * @flow
+ * @jest-environment jsdom
+ */
 
 /* global document */
 

diff --git a/src/sx/src/__tests__/autoprefixRuntimeStyles.test.js b/src/sx/src/__tests__/autoprefixRuntimeStyles.test.js
@@ -1,4 +1,7 @@
-// @flow
+/**
+ * @flow
+ * @jest-environment jsdom
+ */
 
 /* global document */
 

diff --git a/src/sx/src/__tests__/composability.test.js b/src/sx/src/__tests__/composability.test.js
@@ -1,4 +1,7 @@
-// @flow
+/**
+ * @flow
+ * @jest-environment jsdom
+ */
 
 /* global document */
 

diff --git a/src/sx/src/__tests__/injectRuntimeStyles.test.js b/src/sx/src/__tests__/injectRuntimeStyles.test.js
@@ -1,4 +1,7 @@
-// @flow
+/**
+ * @flow
+ * @jest-environment jsdom
+ */
 
 /* global document */