chore: upgrade to Jest v29 (#2289)

* chore: upgrade to Jest v29 * fix: visual tests globals * test: try bumping timeout
commercetools · Sep 19, 2022 · 2750e66 · 2750e66 · vercel · Sep 19, 2022
1 parent aa185a1
commit 2750e66
Show file tree

Hide file tree

Showing 81 changed files with 934 additions and 850 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -30,6 +30,7 @@ module.exports = {
       globals: {
         page: true,
         HOST: true,
+        globalThis: true,
       },
     },
     {

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -47,7 +47,7 @@ jobs:
         run: yarn typecheck
 
       - name: Running linters and tests
-        run: yarn run jest --projects jest.{eslint,stylelint,test,ts-test,bundle}.config.js --reporters jest-silent-reporter
+        run: yarn run jest --projects jest.{eslint,stylelint,test,ts-test,bundle}.config.js --reporters github-actions
         env:
           CI: true
 

diff --git a/generators/package-json/test/generate-package-json.spec.ts b/generators/package-json/test/generate-package-json.spec.ts
@@ -40,11 +40,11 @@ describe('when package.json is NOT private', () => {
       options
     );
     expect(content).toMatchInlineSnapshot(`
-      Object {
+      {
         "bugs": "https://github.com/commercetools/ui-kit/issues",
         "description": "Render an Avenger",
         "homepage": "https://uikit.commercetools.com",
-        "keywords": Array [
+        "keywords": [
           "javascript",
           "typescript",
           "design-system",
@@ -55,18 +55,18 @@ describe('when package.json is NOT private', () => {
         "main": "dist/avenger.cjs.js",
         "module": "dist/avenger.esm.js",
         "name": "@commercetools-uikit/avenger",
-        "peerDependencies": Object {
+        "peerDependencies": {
           "react": "16.8.x",
         },
-        "publishConfig": Object {
+        "publishConfig": {
           "access": "public",
         },
-        "readme": Object {
-          "componentPaths": Array [
+        "readme": {
+          "componentPaths": [
             "./src/avenger.js",
           ],
         },
-        "repository": Object {
+        "repository": {
           "directory": "packages/avenger",
           "type": "git",
           "url": "https://github.com/commercetools/ui-kit.git",

diff --git a/generators/readme/test/generate-readme.spec.ts b/generators/readme/test/generate-readme.spec.ts
@@ -59,7 +59,7 @@ describe('generate README (for JS file)', () => {
       \`\`\`jsx
       import Avenger from '@commercetools-uikit/avenger';
 
-      const Example = () => <Avenger name=\\"Dr. Strange\\" />;
+      const Example = () => <Avenger name="Dr. Strange" />;
 
       export default Example;
 
@@ -91,7 +91,7 @@ describe('generate README (for JS file)', () => {
 
       ## More information
 
-      This section should come AFTER the \\"Properties\\".
+      This section should come AFTER the "Properties".
       "
     `);
   }, 10000);
@@ -139,7 +139,7 @@ describe('generate README (for TS file)', () => {
       \`\`\`jsx
       import JusticeLeague from '@commercetools-uikit/justice-league';
 
-      const Example = () => <JusticeLeague name=\\"Batman\\" />;
+      const Example = () => <JusticeLeague name="Batman" />;
 
       export default Example;
 

diff --git a/jest.bundle.config.js b/jest.bundle.config.js
@@ -31,7 +31,7 @@ if (!info) {
 }
 
 /**
- * @type {import('@jest/types').Config.ProjectConfig}
+ * @type {import('jest').Config}
  */
 module.exports = {
   displayName: 'bundle',
@@ -45,7 +45,9 @@ module.exports = {
   rootDir: rootPath,
   setupFiles: ['<rootDir>/test/setup-tests.js', 'jest-localstorage-mock'],
   testEnvironment: 'jsdom',
-  testURL: 'https://mc.commercetools.com/',
+  testEnvironmentOptions: {
+    url: 'https://mc.europe-west1.gcp.commercetools.com',
+  },
   testPathIgnorePatterns: ['node_modules'],
   testRegex: '\\.bundlespec\\.js$',
   transform: {

diff --git a/jest.eslint.config.js b/jest.eslint.config.js
@@ -1,5 +1,5 @@
 /**
- * @type {import('@jest/types').Config.ProjectConfig}
+ * @type {import('jest').Config}
  */
 module.exports = {
   runner: 'jest-runner-eslint',

diff --git a/jest.stylelint.config.js b/jest.stylelint.config.js
@@ -1,5 +1,5 @@
 /**
- * @type {import('@jest/types').Config.ProjectConfig}
+ * @type {import('jest').Config}
  */
 module.exports = {
   runner: 'jest-runner-stylelint',

diff --git a/jest.test.config.js b/jest.test.config.js
@@ -4,7 +4,7 @@ process.env.ENABLE_NEW_JSX_TRANSFORM = 'true';
 const rootPath = process.cwd();
 
 /**
- * @type {import('@jest/types').Config.ProjectConfig}
+ * @type {import('jest').Config}
  */
 module.exports = {
   displayName: 'test',
@@ -32,9 +32,11 @@ module.exports = {
   clearMocks: true,
   rootDir: rootPath,
   setupFiles: ['<rootDir>/test/setup-tests.js', 'jest-localstorage-mock'],
-  setupFilesAfterEnv: ['<rootDir>/scripts/setup-test-framework.js'],
+  setupFilesAfterEnv: ['<rootDir>/test/setup-test-framework.js'],
   testEnvironment: 'jsdom',
-  testURL: 'https://mc.commercetools.com/',
+  testEnvironmentOptions: {
+    url: 'https://mc.europe-west1.gcp.commercetools.com',
+  },
   testPathIgnorePatterns: ['generators', '/node_modules/'],
   testRegex: '\\.spec\\.[j|t]sx?$',
   moduleFileExtensions: ['js', 'jsx', 'json', 'ts', 'tsx'],

diff --git a/jest.ts-test.config.js b/jest.ts-test.config.js
@@ -1,7 +1,7 @@
 process.env.ENABLE_NEW_JSX_TRANSFORM = 'true';
 
 /**
- * @type {import('@jest/types').Config.ProjectConfig}
+ * @type {import('jest').Config}
  */
 module.exports = {
   preset: 'ts-jest',

diff --git a/jest.visual.config.js b/jest.visual.config.js
@@ -1,7 +1,7 @@
 process.env.ENABLE_NEW_JSX_TRANSFORM = 'true';
 
 /**
- * @type {import('@jest/types').Config.ProjectConfig}
+ * @type {import('jest').Config}
  */
 module.exports = {
   preset: 'jest-puppeteer',
@@ -12,4 +12,6 @@ module.exports = {
   globals: {
     HOST: 'http://localhost:3000',
   },
+  setupFiles: ['<rootDir>/test/setup-globals.js'],
+  watchPlugins: ['jest-watch-typeahead/filename'],
 };
diff --git a/package.json b/package.json
@@ -75,7 +75,7 @@
     "@commitlint/cli": "17.1.2",
     "@commitlint/config-conventional": "17.1.0",
     "@formatjs/cli": "5.1.0",
-    "@formatjs/intl-relativetimeformat": "10.0.1",
+    "@formatjs/intl-relativetimeformat": "11.1.3",
     "@manypkg/cli": "0.19.1",
     "@manypkg/get-packages": "1.1.3",
     "@percy/cli": "1.8.1",
@@ -89,10 +89,9 @@
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "8.0.1",
     "@types/is-hotkey": "^0.1.7",
-    "@types/jest": "27.5.2",
     "@typescript-eslint/eslint-plugin": "5.37.0",
     "@typescript-eslint/parser": "5.37.0",
-    "babel-jest": "27.5.1",
+    "babel-jest": "29.0.3",
     "babel-loader": "8.2.5",
     "babel-plugin-typescript-to-proptypes": "1.4.2",
     "browserslist": "4.21.4",
@@ -109,14 +108,15 @@
     "husky": "8.0.1",
     "identity-obj-proxy": "3.0.0",
     "intl-pluralrules": "1.3.1",
-    "jest": "27.5.1",
-    "jest-localstorage-mock": "2.4.21",
+    "jest": "29.0.3",
+    "jest-environment-jsdom": "29.0.3",
+    "jest-localstorage-mock": "2.4.22",
     "jest-puppeteer": "6.1.1",
     "jest-runner-eslint": "1.0.1",
     "jest-runner-stylelint": "2.3.7",
     "jest-silent-reporter": "0.5.0",
-    "jest-validate": "27.5.1",
-    "jest-watch-typeahead": "2.0.0",
+    "jest-validate": "29.0.3",
+    "jest-watch-typeahead": "2.2.0",
     "lint-staged": "13.0.3",
     "moment": "2.29.4",
     "moment-timezone": "0.5.37",
@@ -144,7 +144,7 @@
     "stylelint-config-prettier": "9.0.3",
     "stylelint-config-standard": "26.0.0",
     "stylelint-order": "5.0.0",
-    "ts-jest": "27.1.5",
+    "ts-jest": "29.0.1",
     "ts-node": "10.9.1",
     "tsc-files": "1.1.3",
     "typescript": "4.8.3"

diff --git a/packages/components/avatar/src/avatar.visualspec.js b/packages/components/avatar/src/avatar.visualspec.js
@@ -2,7 +2,7 @@ import percySnapshot from '@percy/puppeteer';
 
 describe('Avatar', () => {
   beforeAll(async () => {
-    await page.goto(`${HOST}/avatar`);
+    await page.goto(`${globalThis.HOST}/avatar`);
   });
 
   it('Default', async () => {

diff --git a/packages/components/buttons/flat-button/src/flat-button.visualspec.js b/packages/components/buttons/flat-button/src/flat-button.visualspec.js
@@ -2,7 +2,7 @@ import percySnapshot from '@percy/puppeteer';
 
 describe('FlatButton', () => {
   beforeAll(async () => {
-    await page.goto(`${HOST}/flat-button`);
+    await page.goto(`${globalThis.HOST}/flat-button`);
   });
 
   it('Default', async () => {

diff --git a/packages/components/buttons/icon-button/src/icon-button.visualspec.js b/packages/components/buttons/icon-button/src/icon-button.visualspec.js
@@ -2,7 +2,7 @@ import percySnapshot from '@percy/puppeteer';
 
 describe('IconButton', () => {
   beforeAll(async () => {
-    await page.goto(`${HOST}/icon-button`);
+    await page.goto(`${globalThis.HOST}/icon-button`);
   });
 
   it('Default', async () => {

diff --git a/packages/components/buttons/primary-button/src/primary-button.visualspec.js b/packages/components/buttons/primary-button/src/primary-button.visualspec.js
@@ -2,7 +2,7 @@ import percySnapshot from '@percy/puppeteer';
 
 describe('PrimaryButton', () => {
   beforeAll(async () => {
-    await page.goto(`${HOST}/primary-button`);
+    await page.goto(`${globalThis.HOST}/primary-button`);
   });
 
   it('Default', async () => {

diff --git a/packages/components/buttons/secondary-button/src/secondary-button.visualspec.js b/packages/components/buttons/secondary-button/src/secondary-button.visualspec.js
@@ -3,7 +3,7 @@ import { getDocument, queries } from 'pptr-testing-library';
 
 describe('SecondaryButton', () => {
   beforeAll(async () => {
-    await page.goto(`${HOST}/secondary-button`);
+    await page.goto(`${globalThis.HOST}/secondary-button`);
   });
 
   it('Default', async () => {

diff --git a/packages/components/buttons/secondary-icon-button/src/secondary-icon-button.visualspec.js b/packages/components/buttons/secondary-icon-button/src/secondary-icon-button.visualspec.js
@@ -2,7 +2,7 @@ import percySnapshot from '@percy/puppeteer';
 
 describe('SecondaryIconButton', () => {
   beforeAll(async () => {
-    await page.goto(`${HOST}/secondary-icon-button`);
+    await page.goto(`${globalThis.HOST}/secondary-icon-button`);
   });
 
   it('Default', async () => {

diff --git a/packages/components/card/src/card.visualspec.js b/packages/components/card/src/card.visualspec.js
@@ -2,7 +2,7 @@ import percySnapshot from '@percy/puppeteer';
 
 describe('Card', () => {
   beforeAll(async () => {
-    await page.goto(`${HOST}/card`);
+    await page.goto(`${globalThis.HOST}/card`);
   });
 
   it('Default', async () => {

diff --git a/packages/components/collapsible-panel/src/collapsible-panel.visualspec.js b/packages/components/collapsible-panel/src/collapsible-panel.visualspec.js
@@ -2,7 +2,7 @@ import percySnapshot from '@percy/puppeteer';
 
 describe('CollapsiblePanel', () => {
   beforeAll(async () => {
-    await page.goto(`${HOST}/collapsible-panel`);
+    await page.goto(`${globalThis.HOST}/collapsible-panel`);
   });
 
   it('Default', async () => {

diff --git a/packages/components/constraints/src/horizontal/horizontal.visualspec.js b/packages/components/constraints/src/horizontal/horizontal.visualspec.js
@@ -2,7 +2,7 @@ import percySnapshot from '@percy/puppeteer';
 
 describe('Constraints.Horizontal', () => {
   beforeAll(async () => {
-    await page.goto(`${HOST}/constraints-horizontal`);
+    await page.goto(`${globalThis.HOST}/constraints-horizontal`);
   });
 
   it('Default', async () => {

diff --git a/packages/components/data-table/src/data-table.visualspec.js b/packages/components/data-table/src/data-table.visualspec.js
@@ -2,7 +2,7 @@ import percySnapshot from '@percy/puppeteer';
 
 describe('DataTable', () => {
   beforeAll(async () => {
-    await page.goto(`${HOST}/data-table`);
+    await page.goto(`${globalThis.HOST}/data-table`);
   });
 
   it('Default', async () => {

diff --git a/packages/components/field-label/src/field-label.visualspec.js b/packages/components/field-label/src/field-label.visualspec.js
@@ -2,7 +2,7 @@ import percySnapshot from '@percy/puppeteer';
 
 describe('FieldLabel', () => {
   beforeAll(async () => {
-    await page.goto(`${HOST}/field-label`);
+    await page.goto(`${globalThis.HOST}/field-label`);
   });
 
   it('Default', async () => {

diff --git a/...onents/fields/async-creatable-select-field/src/async-creatable-select-field.visualspec.js b/...onents/fields/async-creatable-select-field/src/async-creatable-select-field.visualspec.js
@@ -3,15 +3,17 @@ import { getDocument, queries } from 'pptr-testing-library';
 
 describe('AsyncCreatableSelectField', () => {
   it('Default', async () => {
-    await page.goto(`${HOST}/async-creatable-select-field`);
+    await page.goto(`${globalThis.HOST}/async-creatable-select-field`);
     const doc = await getDocument(page);
     const select = await queries.findAllByLabelText(doc, 'State');
     await expect(select).toBeTruthy();
     await percySnapshot(page, 'AsyncCreatableSelectField');
   });
   describe('with defaultOptions', () => {
     it('When open', async () => {
-      await page.goto(`${HOST}/async-creatable-select-field/interaction`);
+      await page.goto(
+        `${globalThis.HOST}/async-creatable-select-field/interaction`
+      );
       const doc = await getDocument(page);
       const selects = await queries.findAllByLabelText(doc, 'State');
       const select = selects[0];
@@ -22,7 +24,7 @@ describe('AsyncCreatableSelectField', () => {
   describe('without defaultOptions', () => {
     it('When open', async () => {
       await page.goto(
-        `${HOST}/async-creatable-select-field/interaction/without-default-options`
+        `${globalThis.HOST}/async-creatable-select-field/interaction/without-default-options`
       );
       const doc = await getDocument(page);
       const selects = await queries.findAllByLabelText(doc, 'State');

diff --git a/packages/components/fields/async-select-field/src/async-select-field.visualspec.js b/packages/components/fields/async-select-field/src/async-select-field.visualspec.js
@@ -3,7 +3,7 @@ import { getDocument, queries } from 'pptr-testing-library';
 
 describe('AsyncSelectField', () => {
   it('Default', async () => {
-    await page.goto(`${HOST}/async-select-field`);
+    await page.goto(`${globalThis.HOST}/async-select-field`);
     const doc = await getDocument(page);
     const selects = await queries.findAllByLabelText(doc, 'State');
     await expect(selects).toBeTruthy();
@@ -12,7 +12,7 @@ describe('AsyncSelectField', () => {
 
   describe('with defaultOptions', () => {
     it('Open', async () => {
-      await page.goto(`${HOST}/async-select-field/interaction`);
+      await page.goto(`${globalThis.HOST}/async-select-field/interaction`);
       const doc = await getDocument(page);
       const selects = await queries.findAllByLabelText(doc, 'State');
       const select = selects[0];
@@ -24,7 +24,7 @@ describe('AsyncSelectField', () => {
   describe('without defaultOptions', () => {
     it('Open', async () => {
       await page.goto(
-        `${HOST}/async-select-field/interaction/without-default-options`
+        `${globalThis.HOST}/async-select-field/interaction/without-default-options`
       );
       const doc = await getDocument(page);
       const selects = await queries.findAllByLabelText(doc, 'State');

diff --git a/packages/components/fields/creatable-select-field/src/creatable-select-field.visualspec.js b/packages/components/fields/creatable-select-field/src/creatable-select-field.visualspec.js
@@ -2,7 +2,7 @@ import percySnapshot from '@percy/puppeteer';
 
 describe('CreatableSelectField', () => {
   beforeAll(async () => {
-    await page.goto(`${HOST}/creatable-select-field`);
+    await page.goto(`${globalThis.HOST}/creatable-select-field`);
   });
 
   it('Default', async () => {

diff --git a/packages/components/fields/date-field/src/date-field.visualspec.js b/packages/components/fields/date-field/src/date-field.visualspec.js
@@ -2,7 +2,7 @@ import percySnapshot from '@percy/puppeteer';
 
 describe('DateField', () => {
   beforeAll(async () => {
-    await page.goto(`${HOST}/date-field`);
+    await page.goto(`${globalThis.HOST}/date-field`);
   });
 
   it('DateField', async () => {

diff --git a/packages/components/fields/date-range-field/src/date-range-field.visualspec.js b/packages/components/fields/date-range-field/src/date-range-field.visualspec.js
@@ -2,7 +2,7 @@ import percySnapshot from '@percy/puppeteer';
 
 describe('DateRangeField', () => {
   beforeAll(async () => {
-    await page.goto(`${HOST}/date-range-field`);
+    await page.goto(`${globalThis.HOST}/date-range-field`);
   });
 
   it('Default', async () => {