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 · 154daeb · 154daeb
1 parent adc8bdf
commit 154daeb
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 */