chore(test): setup jest test to run against the last three major vers…

…ion of react (#392)
hello-pangea · Aug 21, 2022 · 0fdbc22 · 0fdbc22
1 parent adaeefb
commit 0fdbc22
Show file tree

Hide file tree

Showing 10 changed files with 117 additions and 46 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -68,6 +68,9 @@ jobs:
       - image: cimg/node:16.14.2-browsers
     working_directory: ~/repo
     resource_class: medium+
+    parameters:
+      react-major-version:
+        type: string
     steps:
       - checkout
       - pnpm
@@ -81,6 +84,7 @@ jobs:
           command: pnpm test
           environment:
             JEST_JUNIT_OUTPUT: 'test-reports/junit/js-test-results.xml'
+            REACT_MAJOR_VERSION: << parameters.react-major-version >>
 
       - store_test_results:
           path: test-reports/junit
@@ -187,6 +191,9 @@ workflows:
           requires:
             - install
       - test-unit:
+          matrix:
+            parameters:
+              react-major-version: ['16', '17', '18']
           requires:
             - install
       - test-bundle:

diff --git a/jest.config.js b/jest.config.js
diff --git a/jest.config.ts b/jest.config.ts
@@ -0,0 +1,64 @@
+// eslint-disable-next-line import/no-import-module-exports
+import type { Config } from 'jest';
+
+declare global {
+  interface ProcessEnv {
+    REACT_MAJOR_VERSION: string;
+    CI?: boolean;
+  }
+}
+
+const reactMajorVersion = process.env.REACT_MAJOR_VERSION;
+
+const config: Config = {
+  clearMocks: true,
+  modulePathIgnorePatterns: ['/dist/'],
+  resetMocks: true,
+  resetModules: true,
+  restoreMocks: true,
+
+  // We need a `snapshotResolver` because we run our tests
+  // for different react versions. Each version render components
+  // differently thus returning a different snapshot. We'll store
+  // each snapshot in different folders:
+  // __react_16_snapshots__, __react_17_snapshots__, etc.
+  snapshotResolver: '<rootDir>/test/setup/snapshot-resolver.ts',
+  setupFiles: ['./test/setup/env-setup.ts'],
+  setupFilesAfterEnv: ['./test/setup/test-setup.ts'],
+  testEnvironment: './test/setup/environment.ts',
+  // node_modules is default.
+  testPathIgnorePatterns: ['/node_modules/', '/cypress/'],
+  transform: {
+    '\\.[jt]sx?$': 'babel-jest',
+  },
+  verbose: true,
+  watchPlugins: [
+    'jest-watch-typeahead/filename',
+    'jest-watch-typeahead/testname',
+  ],
+};
+
+// eslint-disable-next-line no-console
+console.log('Testing with React version:', `${reactMajorVersion || '18'}.x.x`);
+
+if (['16', '17'].includes(reactMajorVersion)) {
+  config.testPathIgnorePatterns = [
+    ...(config.testPathIgnorePatterns || []),
+    // These test do not requires react and will
+    // be run in the base run (with react v18)
+    'test/unit/docs',
+    'test/unit/health',
+  ];
+  config.cacheDirectory = `.cache/jest-cache-react-${reactMajorVersion}`;
+  config.moduleNameMapper = {
+    '^@testing-library/react((\\/.*)?)$': `@testing-library/react-16-17$1`,
+    '^react-dom((\\/.*)?)$': `react-dom-${reactMajorVersion}$1`,
+    '^react((\\/.*)?)$': `react-${reactMajorVersion}$1`,
+  };
+}
+
+if (process.env.CI) {
+  config.maxWorkers = 2;
+}
+
+module.exports = config;
diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
     "prepare": "husky install",
     "release": "cross-env SKIP_PREPARE_COMMIT_MSG=true release-it",
     "test:accessibility": "lighthouse http://localhost:9002/iframe.html?id=examples-single-vertical-list--basic --no-enable-error-reporting --config-path=lighthouse.config.js --chrome-flags='--headless' --output=json --output=html --output-path=./test-reports/lighthouse/a11y.json && node a11y-audit-parse.js",
-    "test": "jest --config ./jest.config.js",
+    "test": "jest --config ./jest.config.ts",
     "test:react-16": "cross-env REACT_MAJOR_VERSION=16 pnpm test",
     "test:react-17": "cross-env REACT_MAJOR_VERSION=17 pnpm test",
     "test:react-18": "cross-env REACT_MAJOR_VERSION=18 pnpm test",

diff --git a/test/setup/environment.ts b/test/setup/environment.ts
@@ -1,5 +1,7 @@
-import type { Config } from '@jest/types';
-import type { EnvironmentContext } from '@jest/environment';
+import type {
+  EnvironmentContext,
+  JestEnvironmentConfig,
+} from '@jest/environment';
 import JSDOMEnvironment from 'jest-environment-jsdom';
 import { TextDecoder, TextEncoder } from 'util';
 
@@ -8,12 +10,12 @@ import transitionEventPolyfill from './transition-event-polyfill';
 
 declare global {
   interface ProcessEnv {
-    REACT_VERSION?: string;
+    REACT_MAJOR_VERSION?: string;
   }
 }
 
 export default class MyJSDOMEnvironment extends JSDOMEnvironment {
-  constructor(config: Config.ProjectConfig, context?: EnvironmentContext) {
+  constructor(config: JestEnvironmentConfig, context: EnvironmentContext) {
     super(config, context);
 
     attachRafStub.call(this);

diff --git a/test/setup/snapshot-resolver.ts b/test/setup/snapshot-resolver.ts
@@ -0,0 +1,28 @@
+import path from 'path';
+
+// resolve snapshot folder with the react version
+// __react_16_snapshots__, __react_17_snapshots__, etc.
+export default {
+  // resolves from test to snapshot path
+  resolveSnapshotPath: (testPath: string, snapshotExtension: string) => {
+    const breadcrumb = testPath.split(path.sep);
+    const filename = breadcrumb.pop();
+
+    return (
+      [
+        ...breadcrumb,
+        `__react_${process.env.REACT_MAJOR_VERSION}_snapshots__`,
+        filename,
+      ].join(path.sep) + snapshotExtension
+    );
+  },
+
+  // resolves from snapshot to test path
+  resolveTestPath: (snapshotFilePath: string, snapshotExtension: string) =>
+    snapshotFilePath
+      .replace(/__react_[0-9]+_snapshots__[\\/]/, '')
+      .slice(0, -snapshotExtension.length),
+
+  // Example test path, used for preflight consistency check of the implementation above
+  testPathForConsistencyCheck: 'some/example.test.ts',
+};
diff --git a/test/setup/test-setup.ts b/test/setup/test-setup.ts
@@ -2,6 +2,7 @@ import '@testing-library/jest-dom';
 
 // ensuring that each test has at least one assertion
 beforeEach(() => {
+  // eslint-disable-next-line jest/no-standalone-expect
   expect.hasAssertions();
 });
 

diff --git a/...napshots__/server-rendering.spec.tsx.snap → ...napshots__/server-rendering.spec.tsx.snap b/...napshots__/server-rendering.spec.tsx.snap → ...napshots__/server-rendering.spec.tsx.snap
diff --git a/...t/integration/server-side-rendering/__react_17_snapshots__/server-rendering.spec.tsx.snap b/...t/integration/server-side-rendering/__react_17_snapshots__/server-rendering.spec.tsx.snap
@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should support rendering to a string 1`] = `"<main data-reactroot=\\"\\"><div data-rfd-droppable-id=\\"droppable\\" data-rfd-droppable-context-id=\\"0\\"><div data-rfd-draggable-context-id=\\"0\\" data-rfd-draggable-id=\\"0\\" tabindex=\\"0\\" role=\\"button\\" aria-describedby=\\"rfd-hidden-text-0-hidden-text-0\\" data-rfd-drag-handle-draggable-id=\\"0\\" data-rfd-drag-handle-context-id=\\"0\\" draggable=\\"false\\" data-is-dragging=\\"false\\" data-is-drop-animating=\\"false\\" data-is-combining=\\"false\\" data-is-combine-target=\\"false\\" data-is-clone=\\"false\\" data-testid=\\"0\\">item: <!-- -->0</div><div data-rfd-draggable-context-id=\\"0\\" data-rfd-draggable-id=\\"1\\" tabindex=\\"0\\" role=\\"button\\" aria-describedby=\\"rfd-hidden-text-0-hidden-text-0\\" data-rfd-drag-handle-draggable-id=\\"1\\" data-rfd-drag-handle-context-id=\\"0\\" draggable=\\"false\\" data-is-dragging=\\"false\\" data-is-drop-animating=\\"false\\" data-is-combining=\\"false\\" data-is-combine-target=\\"false\\" data-is-clone=\\"false\\" data-testid=\\"1\\">item: <!-- -->1</div><div data-rfd-draggable-context-id=\\"0\\" data-rfd-draggable-id=\\"2\\" tabindex=\\"0\\" role=\\"button\\" aria-describedby=\\"rfd-hidden-text-0-hidden-text-0\\" data-rfd-drag-handle-draggable-id=\\"2\\" data-rfd-drag-handle-context-id=\\"0\\" draggable=\\"false\\" data-is-dragging=\\"false\\" data-is-drop-animating=\\"false\\" data-is-combining=\\"false\\" data-is-combine-target=\\"false\\" data-is-clone=\\"false\\" data-testid=\\"2\\">item: <!-- -->2</div></div></main>"`;
+
+exports[`should support rendering to static markup 1`] = `"<main><div data-rfd-droppable-id=\\"droppable\\" data-rfd-droppable-context-id=\\"0\\"><div data-rfd-draggable-context-id=\\"0\\" data-rfd-draggable-id=\\"0\\" tabindex=\\"0\\" role=\\"button\\" aria-describedby=\\"rfd-hidden-text-0-hidden-text-0\\" data-rfd-drag-handle-draggable-id=\\"0\\" data-rfd-drag-handle-context-id=\\"0\\" draggable=\\"false\\" data-is-dragging=\\"false\\" data-is-drop-animating=\\"false\\" data-is-combining=\\"false\\" data-is-combine-target=\\"false\\" data-is-clone=\\"false\\" data-testid=\\"0\\">item: 0</div><div data-rfd-draggable-context-id=\\"0\\" data-rfd-draggable-id=\\"1\\" tabindex=\\"0\\" role=\\"button\\" aria-describedby=\\"rfd-hidden-text-0-hidden-text-0\\" data-rfd-drag-handle-draggable-id=\\"1\\" data-rfd-drag-handle-context-id=\\"0\\" draggable=\\"false\\" data-is-dragging=\\"false\\" data-is-drop-animating=\\"false\\" data-is-combining=\\"false\\" data-is-combine-target=\\"false\\" data-is-clone=\\"false\\" data-testid=\\"1\\">item: 1</div><div data-rfd-draggable-context-id=\\"0\\" data-rfd-draggable-id=\\"2\\" tabindex=\\"0\\" role=\\"button\\" aria-describedby=\\"rfd-hidden-text-0-hidden-text-0\\" data-rfd-drag-handle-draggable-id=\\"2\\" data-rfd-drag-handle-context-id=\\"0\\" draggable=\\"false\\" data-is-dragging=\\"false\\" data-is-drop-animating=\\"false\\" data-is-combining=\\"false\\" data-is-combine-target=\\"false\\" data-is-clone=\\"false\\" data-testid=\\"2\\">item: 2</div></div></main>"`;
diff --git a/...t/integration/server-side-rendering/__react_18_snapshots__/server-rendering.spec.tsx.snap b/...t/integration/server-side-rendering/__react_18_snapshots__/server-rendering.spec.tsx.snap
@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should support rendering to a string 1`] = `"<main><div data-rfd-droppable-id=\\"droppable\\" data-rfd-droppable-context-id=\\"0\\"><div data-rfd-draggable-context-id=\\"0\\" data-rfd-draggable-id=\\"0\\" tabindex=\\"0\\" role=\\"button\\" aria-describedby=\\"rfd-hidden-text-0-hidden-text-0\\" data-rfd-drag-handle-draggable-id=\\"0\\" data-rfd-drag-handle-context-id=\\"0\\" draggable=\\"false\\" data-is-dragging=\\"false\\" data-is-drop-animating=\\"false\\" data-is-combining=\\"false\\" data-is-combine-target=\\"false\\" data-is-clone=\\"false\\" data-testid=\\"0\\">item: <!-- -->0</div><div data-rfd-draggable-context-id=\\"0\\" data-rfd-draggable-id=\\"1\\" tabindex=\\"0\\" role=\\"button\\" aria-describedby=\\"rfd-hidden-text-0-hidden-text-0\\" data-rfd-drag-handle-draggable-id=\\"1\\" data-rfd-drag-handle-context-id=\\"0\\" draggable=\\"false\\" data-is-dragging=\\"false\\" data-is-drop-animating=\\"false\\" data-is-combining=\\"false\\" data-is-combine-target=\\"false\\" data-is-clone=\\"false\\" data-testid=\\"1\\">item: <!-- -->1</div><div data-rfd-draggable-context-id=\\"0\\" data-rfd-draggable-id=\\"2\\" tabindex=\\"0\\" role=\\"button\\" aria-describedby=\\"rfd-hidden-text-0-hidden-text-0\\" data-rfd-drag-handle-draggable-id=\\"2\\" data-rfd-drag-handle-context-id=\\"0\\" draggable=\\"false\\" data-is-dragging=\\"false\\" data-is-drop-animating=\\"false\\" data-is-combining=\\"false\\" data-is-combine-target=\\"false\\" data-is-clone=\\"false\\" data-testid=\\"2\\">item: <!-- -->2</div></div></main>"`;
+
+exports[`should support rendering to static markup 1`] = `"<main><div data-rfd-droppable-id=\\"droppable\\" data-rfd-droppable-context-id=\\"0\\"><div data-rfd-draggable-context-id=\\"0\\" data-rfd-draggable-id=\\"0\\" tabindex=\\"0\\" role=\\"button\\" aria-describedby=\\"rfd-hidden-text-0-hidden-text-0\\" data-rfd-drag-handle-draggable-id=\\"0\\" data-rfd-drag-handle-context-id=\\"0\\" draggable=\\"false\\" data-is-dragging=\\"false\\" data-is-drop-animating=\\"false\\" data-is-combining=\\"false\\" data-is-combine-target=\\"false\\" data-is-clone=\\"false\\" data-testid=\\"0\\">item: 0</div><div data-rfd-draggable-context-id=\\"0\\" data-rfd-draggable-id=\\"1\\" tabindex=\\"0\\" role=\\"button\\" aria-describedby=\\"rfd-hidden-text-0-hidden-text-0\\" data-rfd-drag-handle-draggable-id=\\"1\\" data-rfd-drag-handle-context-id=\\"0\\" draggable=\\"false\\" data-is-dragging=\\"false\\" data-is-drop-animating=\\"false\\" data-is-combining=\\"false\\" data-is-combine-target=\\"false\\" data-is-clone=\\"false\\" data-testid=\\"1\\">item: 1</div><div data-rfd-draggable-context-id=\\"0\\" data-rfd-draggable-id=\\"2\\" tabindex=\\"0\\" role=\\"button\\" aria-describedby=\\"rfd-hidden-text-0-hidden-text-0\\" data-rfd-drag-handle-draggable-id=\\"2\\" data-rfd-drag-handle-context-id=\\"0\\" draggable=\\"false\\" data-is-dragging=\\"false\\" data-is-drop-animating=\\"false\\" data-is-combining=\\"false\\" data-is-combine-target=\\"false\\" data-is-clone=\\"false\\" data-testid=\\"2\\">item: 2</div></div></main>"`;