React 17 CI tests [LG-3540] (#1954)

* Create react17.yml

* add react 17 config

* add react17 flag to cli command

* Update jest.config.js

* Revert "Update jest.config.js"

This reverts commit c6690ed.

* rollback react types

* sets resolutions

* update resolutions

* no frozen lock file

* one more dep

* add yarn

* userevent 13.5.0

---------

Co-authored-by: brooke <brooke.yalof@mongodb.com>
Co-authored-by: Shaneeza <shaneeza.ali@mongodb.com>

.github/workflows/react17.yml

@@ -0,0 +1,36 @@
+name: React 17
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  react17:
+    name: Test in React 17
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Set react types resolution
+        uses: sergeysova/jq-action@v2
+        with:
+          cmd: echo -E "$(jq '.resolutions = {"@types/react":"^16.9.56"}' package.json)" > package.json
+
+      - name: Install package.json
+        run: yarn install --prefer-offline
+
+      - name: Install React & React DOM 17
+        run: yarn add -DW react@17.0.2 react-dom@17.0.2 @types/react@16.9.56 @types/react-dom@16.9.18 @types/react-is@17
+
+      - name: Install testing frameworks
+        run: yarn add -DW @testing-library/dom@7.31.2 @testing-library/jest-dom@5.16.5 @testing-library/react@10.4.9 @testing-library/react-hooks@3.7.0 @types/jest@26.0.24 @types/jest-axe@3.5.3 babel-jest@26.6.3 jest@26.6.3 jest-axe@4.1.0 jest-junit@10.0.0 react-test-renderer@17.0.2 regenerator-runtime@0.13.10 @testing-library/user-event@13.5.0
+
+      - name: Build packages
+        run: yarn build
+
+      - name: Run tests in React 17
+        run: yarn lg test --react17

tools/cli/src/index.ts

@@ -126,6 +126,7 @@ cli
     '--config',
     'Specify a jest config file. By default will look for `jest.config.js` at the root, or use `@lg-tools/test/config`',
   )
+  .option('--react17', 'Runs tests in a React17 environment', false)
   .allowUnknownOption(true)
   .option('-v --verbose', 'Prints additional information to the console', false)
   .action(test);

tools/test/config/react17/jest.config.js

@@ -0,0 +1,68 @@
+// For a detailed explanation regarding each configuration property, visit:
+// https://jestjs.io/docs/en/configuration.html
+
+// When referencing files in this package,
+// note we still need to declare the path relative to `<rootDir>`
+
+module.exports = {
+  // The directory where Jest should output its coverage files
+  coverageDirectory: 'coverage',
+  coveragePathIgnorePatterns: ['/node_modules/', '/dist/', '/index.ts', '.svg'],
+
+  // An array of file extensions your modules use
+  moduleFileExtensions: [
+    'js',
+    'jsx',
+    'ts',
+    'tsx',
+    'json',
+    'node',
+    'png',
+    'jpg',
+    'jpeg',
+    'gif',
+    'svg',
+    'woff',
+    'woff2',
+    'ttf',
+    'eot',
+    'less',
+  ],
+
+  // A map from regular expressions to module names that allow to stub out resources with a single module
+  moduleNameMapper: {
+    '.(png|jpg|jpeg|gif|woff|woff2|ttf|less|eot)$':
+      '<rootDir>/node_modules/@lg-tools/test/config/mocks/fileMock.js',
+  },
+
+  modulePathIgnorePatterns: ['npm-cache', '.npm'],
+
+  // The test environment that will be used for testing
+  testEnvironment: 'jsdom',
+
+  // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+  testPathIgnorePatterns: ['/node_modules/'],
+
+  // The regexp pattern Jest uses to detect test files
+  testRegex: '.spec.[jt]sx?$',
+
+  // A map from regular expressions to paths to transformers
+  transform: {
+    '^.+\\.[jt]sx?$': 'babel-jest',
+    '.svg':
+      '<rootDir>/node_modules/@lg-tools/test/config/react17/mocks/svgTransformer.js',
+  },
+
+  // Ignore transforming node_modules except for:
+  // 1. `react-children-utilities`
+  transformIgnorePatterns: ['/node_modules/(?!(react-children-utilities)/)'],
+
+  setupFiles: [
+    '<rootDir>/node_modules/@lg-tools/test/config/react17/setup.js',
+    'jest-canvas-mock',
+  ],
+
+  setupFilesAfterEnv: [
+    '<rootDir>/node_modules/@lg-tools/test/config/common.setup.js',
+  ],
+};

tools/test/config/react17/mocks/svgTransformer.js

@@ -0,0 +1,3 @@
+exports.process = svg => {
+  return `module.exports = ${JSON.stringify({ svg })};`;
+};

tools/test/config/react17/setup.js

@@ -0,0 +1,25 @@
+const React = require('react');
+const ReactDOM = require('react-dom');
+
+// As of Jest 24 (https://jestjs.io/blog/2019/01/25/jest-24-refreshing-polished-typescript-friendly#breaking-changes)
+// this is no longer included by default for async tests
+// So we're including it so we can use async/await
+require('regenerator-runtime/runtime');
+global.MutationObserver = class {
+  constructor() {}
+  disconnect() {}
+  observe() {}
+};
+global.IntersectionObserver = class {
+  constructor() {}
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
+const originalRender = ReactDOM.render;
+
+ReactDOM.render = (element, container, callback) => {
+  element = React.createElement(React.StrictMode, [], element);
+  return originalRender(element, container, callback);
+};

tools/test/src/index.ts

@@ -1,4 +1,5 @@
 #! /usr/bin/env node
+/* eslint-disable no-console */
 import { spawn } from 'cross-spawn';
 import fse from 'fs-extra';
 import path from 'path';
@@ -8,14 +9,15 @@ export interface TestCommandOptions {
   watch?: boolean;
   verbose?: boolean;
   config?: string;
+  react17?: boolean;
 }
 
 export const test = (
   passThrough: Array<string> | string | undefined,
   options: TestCommandOptions,
 ) => {
   const rootDir = process.cwd();
-  const { watch, ci, verbose, config: configParam } = options;
+  const { watch, ci, verbose, config: configParam, react17 } = options;
   const ciFlags = [
     '--no-cache',
     '--ci',
@@ -31,12 +33,12 @@ export const test = (
 
   const localConfigFile = path.resolve(rootDir, 'jest.config.js');
   const defaultConfigFile = path.resolve(__dirname, '../config/jest.config.js');
-  const configFile =
-    configParam && fse.existsSync(configParam)
-      ? configParam // Use the parameter if it exists
-      : fse.existsSync(localConfigFile)
-      ? localConfigFile // otherwise look for a config at the root
-      : defaultConfigFile; // fallback to the default config
+  const react17ConfigFile = path.resolve(
+    __dirname,
+    '../config/react17/jest.config.js',
+  );
+
+  const configFile = getConfigFile();
 
   const commandArgs = [
     ...[`--config`, configFile],
@@ -54,4 +56,27 @@ export const test = (
     },
     stdio: 'inherit',
   }).on('exit', process.exit);
+
+  // uses closure
+  function getConfigFile() {
+    if (configParam && fse.existsSync(configParam)) {
+      return configParam; // Use the parameter if it exists
+    }
+
+    if (react17) {
+      if (fse.existsSync(react17ConfigFile)) {
+        console.log('Using React 17 test config');
+        verbose && console.log(react17ConfigFile);
+        return react17ConfigFile; // If react17 flag was used, use that config
+      } else {
+        throw new Error('No React17 test config found');
+      }
+    }
+
+    if (fse.existsSync(localConfigFile)) {
+      return localConfigFile; // otherwise look for a config at the root
+    }
+
+    return defaultConfigFile; // fallback to the default config
+  }
 };