[Tech debt] Fix Jest unit tests on broken on React 17 (#7227)

Co-authored-by: Cee Chen <[email protected]>
elastic · Sep 29, 2023 · 01f23ab · 01f23ab
1 parent cf0eb82
commit 01f23ab
Show file tree

Hide file tree

Showing 12 changed files with 620 additions and 131 deletions.
diff --git a/.buildkite/scripts/pipeline_test.sh b/.buildkite/scripts/pipeline_test.sh
@@ -13,4 +13,6 @@ docker run \
   docker.elastic.co/eui/ci:5.3 \
   bash -c "/opt/yarn*/bin/yarn \
   && yarn cypress install \
-  && NODE_OPTIONS=\"--max-old-space-size=2048\" npm run test-ci"
+  && yarn lint \
+  && yarn test-unit --node-options=--max_old_space_size=2048 \
+  && yarn test-cypress --node-options=--max_old_space_size=2048"
diff --git a/package.json b/package.json
@@ -31,12 +31,12 @@
     "lint-sass": "yarn stylelint \"**/*.scss\" --quiet-deprecation-warnings",
     "test": "yarn lint && yarn test-unit",
     "test-ci": "yarn test && yarn test-cypress",
-    "test-unit": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.js",
+    "test-unit": "node ./scripts/test-unit",
     "test-a11y": "node ./scripts/a11y-testing",
     "test-staged": "yarn lint && node scripts/test-staged.js",
-    "test-cypress": "node ./scripts/cypress",
-    "test-cypress-dev": "node ./scripts/cypress --dev",
-    "test-cypress-a11y": "node ./scripts/cypress --a11y",
+    "test-cypress": "node ./scripts/test-cypress",
+    "test-cypress-dev": "yarn test-cypress --dev",
+    "test-cypress-a11y": "yarn test-cypress --a11y",
     "combine-test-coverage": "sh ./scripts/combine-coverage.sh",
     "start-test-server": "BABEL_MODULES=false NODE_ENV=puppeteer NODE_OPTIONS=--max-old-space-size=4096 webpack-dev-server --config src-docs/webpack.config.js --port 9999",
     "yo-component": "yo ./generator-eui/app/component.js",

diff --git a/scripts/cypress.js → scripts/test-cypress.js b/scripts/cypress.js → scripts/test-cypress.js
@@ -17,6 +17,7 @@ const argv = yargs(hideBin(process.argv))
     'unknown-options-as-args': true, // collect any extra options to pass on to cypress
   })
   .options({
+    'node-options': { type: 'string', default: '' },
     'skip-css': { type: 'boolean' },
     dev: { type: 'boolean' },
     theme: { type: 'string', default: 'light', choices: ['light', 'dark'] },
@@ -28,6 +29,7 @@ const argv = yargs(hideBin(process.argv))
     },
   }).argv;
 
+const nodeOptions = argv['node-options'];
 const isDev = argv.hasOwnProperty('dev');
 const isA11y = argv.hasOwnProperty('a11y');
 const skipScss = argv.hasOwnProperty('skip-css');
@@ -59,6 +61,7 @@ const cypressCommandParts = [
   'cross-env', // windows support
   `THEME=${theme}`, // pass the theme
   'BABEL_MODULES=false', // let webpack receive ES Module code
+  `NODE_OPTIONS="${nodeOptions}"`,
   'NODE_ENV=cypress_test', // enable code coverage checks
   `REACT_VERSION=${reactVersion}`, // set react version to test
   `cypress ${testParams}`,

diff --git a/scripts/test-unit.js b/scripts/test-unit.js
@@ -0,0 +1,58 @@
+const { execSync } = require('child_process');
+const yargs = require('yargs/yargs');
+const { hideBin } = require('yargs/helpers');
+const chalk = require('chalk');
+
+const { argv } = yargs(hideBin(process.argv))
+  .parserConfiguration({
+    // @see https://github.com/yargs/yargs-parser#configuration
+    'camel-case-expansion': false,
+    'unknown-options-as-args': true,
+    'halt-at-non-option': true,
+  })
+  .options({
+    'node-options': { type: 'string', default: '' },
+    'react-version': {
+      type: 'number',
+      default: 18,
+      choices: [16, 17, 18],
+    },
+    testMatch: {
+      type: 'string',
+      description:
+        'Pass in `react` to only test `.tsx` files, or `non-react` for the opposite. Also accepts standard Jest `--testMatch` globs',
+      coerce: (value) => {
+        if (value === 'react') {
+          value = '**/*.test.tsx';
+        } else if (value === 'non-react') {
+          value = '**/*.test.{js,ts}';
+        }
+        return value;
+      },
+    },
+  });
+const nodeOptions = argv['node-options'];
+const reactVersion = argv['react-version'];
+const testMatch = argv['testMatch'];
+
+const commandParts = [
+  'cross-env', // windows support
+  `NODE_OPTIONS="${nodeOptions}"`,
+  'NODE_ENV=test',
+  `REACT_VERSION=${reactVersion}`,
+  `jest --config ./scripts/jest/config.js`,
+  ...argv._, // pass any extra options given to this script
+];
+if (testMatch) {
+  commandParts.push(`--testMatch '${testMatch}'`); // has to come after any filename patterns
+}
+
+const command = commandParts.join(' ');
+console.log(chalk.white(command));
+try {
+  execSync(command, { stdio: 'inherit' });
+} catch {
+  // Jest already outputs sufficient error messaging, no need to emit a
+  // node child process stack trace that just unhelpfully points to this file
+  process.exit(1);
+}
diff --git a/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap b/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
@@ -105,102 +105,3 @@ exports[`EuiCollapsibleNavBeta renders initialIsCollapsed 1`] = `
   </div>
 </body>
 `;
-
-exports[`EuiCollapsibleNavBeta responsive behavior collapses from a push flyout to an overlay flyout once the screen is smaller than 3x the flyout width 1`] = `
-<body
-  class=""
-  style="padding-left: 0px;"
->
-  <div>
-    <div
-      class="euiCollapsibleNavButtonWrapper emotion-euiCollapsibleNavButtonWrapper-left"
-    >
-      <button
-        aria-controls="generated-id_euiCollapsibleNav"
-        aria-expanded="false"
-        aria-label="Toggle navigation open"
-        aria-pressed="false"
-        class="euiButtonIcon euiCollapsibleNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsibleNavButton"
-        data-test-subj="euiCollapsibleNavButton"
-        type="button"
-      >
-        <span
-          aria-hidden="true"
-          class="euiButtonIcon__icon"
-          color="inherit"
-          data-euiicon-type="menu"
-        />
-      </button>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`EuiCollapsibleNavBeta responsive behavior makes the overlay flyout full width once the screen is smaller than 1.5x the flyout width 1`] = `
-<body
-  class="euiBody--hasFlyout"
-  style="padding-left: 0px;"
->
-  <div>
-    <div
-      class="euiCollapsibleNavButtonWrapper emotion-euiCollapsibleNavButtonWrapper-left"
-    >
-      <button
-        aria-controls="generated-id_euiCollapsibleNav"
-        aria-expanded="true"
-        aria-label="Toggle navigation closed"
-        aria-pressed="true"
-        class="euiButtonIcon euiCollapsibleNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsibleNavButton"
-        data-test-subj="euiCollapsibleNavButton"
-        type="button"
-      >
-        <span
-          aria-hidden="true"
-          class="euiButtonIcon__icon"
-          color="inherit"
-          data-euiicon-type="cross"
-        />
-      </button>
-    </div>
-  </div>
-  <div
-    class="euiOverlayMask emotion-euiOverlayMask-belowHeader"
-    data-euiportal="true"
-    data-relative-to-header="below"
-  >
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="0"
-    />
-    <div
-      data-focus-lock-disabled="false"
-    >
-      <nav
-        aria-describedby="generated-id"
-        aria-label="Site menu"
-        class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNavBeta-left-isOverlayFullWidth"
-        data-autofocus="true"
-        id="generated-id_euiCollapsibleNav"
-        role="dialog"
-        style="inline-size: 100%;"
-        tabindex="0"
-      >
-        <p
-          class="emotion-euiScreenReaderOnly"
-          id="generated-id"
-        >
-          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close.
-           
-        </p>
-        Nav content
-      </nav>
-    </div>
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="0"
-    />
-  </div>
-</body>
-`;
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.test.tsx b/src/components/collapsible_nav_beta/collapsible_nav_beta.test.tsx
@@ -72,19 +72,28 @@ describe('EuiCollapsibleNavBeta', () => {
 
     it('collapses from a push flyout to an overlay flyout once the screen is smaller than 3x the flyout width', () => {
       mockWindowResize(600);
-      const { baseElement } = render(
-        <EuiCollapsibleNavBeta>Nav content</EuiCollapsibleNavBeta>
+      const { queryByTestSubject, getByTestSubject } = render(
+        <EuiCollapsibleNavBeta data-test-subj="nav">
+          Nav content
+        </EuiCollapsibleNavBeta>
       );
-      expect(baseElement).toMatchSnapshot();
+      expect(queryByTestSubject('nav')).not.toBeInTheDocument();
+      fireEvent.click(getByTestSubject('euiCollapsibleNavButton'));
+
+      expect(getByTestSubject('nav').className).toContain('overlay');
+      expect(getByTestSubject('nav').className).not.toContain('push');
     });
 
     it('makes the overlay flyout full width once the screen is smaller than 1.5x the flyout width', () => {
       mockWindowResize(320);
       const { baseElement, getByTestSubject } = render(
-        <EuiCollapsibleNavBeta>Nav content</EuiCollapsibleNavBeta>
+        <EuiCollapsibleNavBeta data-test-subj="nav">
+          Nav content
+        </EuiCollapsibleNavBeta>
       );
       fireEvent.click(getByTestSubject('euiCollapsibleNavButton'));
-      expect(baseElement).toMatchSnapshot();
+
+      expect(getByTestSubject('nav').className).toContain('isOverlayFullWidth');
 
       // onClose testing
       expect(