[test] Update react next patch

.circleci/config.yml

@@ -213,6 +213,7 @@ workflows:
                 - l10n
                 - /dependabot\//
       - test_unit:
+          react-dist-tag: next
           requires:
             - checkout
       - test_static:
@@ -222,9 +223,11 @@ workflows:
           requires:
             - checkout
       - test_browser:
+          react-dist-tag: next
           requires:
             - checkout
       - test_regressions:
+          react-dist-tag: next
           requires:
             - test_unit
             - test_static

package.json

@@ -90,7 +90,7 @@
     "core-js": "^2.6.11",
     "cross-env": "^7.0.0",
     "danger": "^10.0.0",
-    "dom-accessibility-api": "^0.4.3",
+    "dom-accessibility-api": "^0.5.1",
     "dtslint": "^3.2.0",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.14.0",

packages/material-ui-styles/src/makeStyles/makeStyles.test.js

@@ -205,7 +205,10 @@ describe('makeStyles', () => {
       expect(sheetsRegistry.registry.length).to.equal(1);
       expect(sheetsRegistry.registry[0].classes).to.deep.equal({ root: 'makeStyles-root-2' });
 
-      wrapper.unmount();
+      // TODO: Unnecessary on `next` branch
+      act(() => {
+        wrapper.unmount();
+      });
       expect(sheetsRegistry.registry.length).to.equal(0);
     });
 

packages/material-ui-styles/src/withStyles/withStyles.test.js

@@ -3,6 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { stub } from 'sinon';
 import { SheetsRegistry } from 'jss';
+import { act } from 'react-dom/test-utils';
 import { Input } from '@material-ui/core';
 import createMount from 'test/utils/createMount';
 import { isMuiElement } from '@material-ui/core/utils';
@@ -110,7 +111,10 @@ describe('withStyles', () => {
       expect(sheetsRegistry.registry.length).to.equal(1);
       expect(sheetsRegistry.registry[0].classes).to.deep.equal({ root: 'Empty-root-2' });
 
-      wrapper.unmount();
+      // TODO: Unnecessary on `next` branch
+      act(() => {
+        wrapper.unmount();
+      });
       expect(sheetsRegistry.registry.length).to.equal(0);
     });
 

packages/material-ui/src/Select/Select.test.js

@@ -950,14 +950,14 @@ describe('<Select />', () => {
     });
 
     it('can be labelled with a <label />', () => {
-      const { getByLabelText } = render(
+      const { getByRole } = render(
         <React.Fragment>
           <label htmlFor="select">A select</label>
           <Select id="select" native />
         </React.Fragment>,
       );
 
-      expect(getByLabelText('A select')).to.have.property('tagName', 'SELECT');
+      expect(getByRole('combobox', { name: 'A select' })).to.have.property('tagName', 'SELECT');
     });
   });
 

packages/material-ui/src/TextField/TextField.test.js

@@ -49,9 +49,9 @@ describe('<TextField />', () => {
 
   describe('with a label', () => {
     it('label the input', () => {
-      const { getByLabelText } = render(<TextField id="labelled" label="Foo bar" />);
+      const { getByRole } = render(<TextField id="labelled" label="Foo bar" />);
 
-      expect(getByLabelText('Foo bar')).not.to.equal(null);
+      expect(getByRole('textbox', { name: 'Foo bar' })).not.to.equal(null);
     });
 
     it('should apply the className to the label', () => {
@@ -156,7 +156,7 @@ describe('<TextField />', () => {
     });
 
     it('associates the label with the <select /> when `native={true}` and `id`', () => {
-      const { getByLabelText } = render(
+      const { getByRole } = render(
         <TextField
           label="Currency:"
           id="labelled-select"
@@ -168,7 +168,7 @@ describe('<TextField />', () => {
         </TextField>,
       );
 
-      expect(getByLabelText('Currency:')).to.have.property('value', 'dollar');
+      expect(getByRole('combobox', { name: 'Currency:' })).to.have.property('value', 'dollar');
     });
 
     it('renders a combobox with the appropriate accessible name', () => {

scripts/react-next.diff

@@ -1,5 +1,5 @@
 diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
-index 2f3ea31dc..4ad337e85 100644
+index 2f3ea31dc2..4ad337e85a 100644
 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
 +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
 @@ -1018,7 +1018,7 @@ describe('<Autocomplete />', () => {
@@ -29,8 +29,22 @@ index 2f3ea31dc..4ad337e85 100644
        expect(consoleWarnMock.messages()[0]).to.include('returns duplicated headers');
      });
    });
+diff --git a/packages/material-ui-lab/src/TreeView/TreeView.test.js b/packages/material-ui-lab/src/TreeView/TreeView.test.js
+index 50c9f5d05c..59ff4d8fd0 100644
+--- a/packages/material-ui-lab/src/TreeView/TreeView.test.js
++++ b/packages/material-ui-lab/src/TreeView/TreeView.test.js
+@@ -118,8 +118,7 @@ describe('<TreeView />', () => {
+       const {
+         current: { errors },
+       } = errorRef;
+-      expect(errors).to.have.length(1);
+-      expect(errors[0].toString()).to.include('RangeError: Maximum call stack size exceeded');
++      expect(errors).to.have.length(0);
+     });
+   });
+
 diff --git a/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.test.js b/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.test.js
-index 9013d9095..7f0862466 100644
+index 9013d90955..7f0862466d 100644
 --- a/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.test.js
 +++ b/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.test.js
 @@ -135,7 +135,7 @@ describe('ThemeProvider', () => {
@@ -52,7 +66,7 @@ index 9013d9095..7f0862466 100644
          'Material-UI: You should return an object from your theme function',
        );
 diff --git a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js
-index ed0e37f21..49d8ea9b0 100644
+index ed0e37f214..49d8ea9b0f 100644
 --- a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js
 +++ b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js
 @@ -102,7 +102,7 @@ describe('<Breadcrumbs />', () => {
@@ -64,8 +78,22 @@ index ed0e37f21..49d8ea9b0 100644
        expect(consoleErrorMock.messages()[0]).to.include(
          'Material-UI: You have provided an invalid combination of props to the Breadcrumbs.\nitemsAfterCollapse={2} + itemsBeforeCollapse={2} >= maxItems={3}',
        );
+diff --git a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.test.js b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.test.js
+index 5e538c8ea3..3b7d03c987 100644
+--- a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.test.js
++++ b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.test.js
+@@ -132,8 +132,7 @@ describe('<ClickAwayListener />', () => {
+       expect(handleClickAway.callCount).to.equal(0);
+
+       fireEvent.click(getByText('Stop inside a portal'));
+-      // True-negative, we don't have enough information to do otherwise.
+-      expect(handleClickAway.callCount).to.equal(1);
++      expect(handleClickAway.callCount).to.equal(0);
+     });
+   });
+
 diff --git a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.test.js b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.test.js
-index 09daadd96..1eaf80628 100644
+index 09daadd961..1eaf806289 100644
 --- a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.test.js
 +++ b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.test.js
 @@ -261,7 +261,7 @@ describe('<TextareaAutosize />', () => {
@@ -78,7 +106,7 @@ index 09daadd96..1eaf80628 100644
        });
      });
 diff --git a/packages/material-ui/src/internal/SwitchBase.test.js b/packages/material-ui/src/internal/SwitchBase.test.js
-index 41a38bc07..c9397fd13 100644
+index 41a38bc073..c9397fd133 100644
 --- a/packages/material-ui/src/internal/SwitchBase.test.js
 +++ b/packages/material-ui/src/internal/SwitchBase.test.js
 @@ -373,7 +373,7 @@ describe('<SwitchBase />', () => {
@@ -100,7 +128,7 @@ index 41a38bc07..c9397fd13 100644
          expect(consoleErrorMock.messages()[1]).to.include(
            'Material-UI: A component is changing the controlled checked state of SwitchBase to be uncontrolled.',
 diff --git a/packages/material-ui/src/useMediaQuery/useMediaQuery.test.js b/packages/material-ui/src/useMediaQuery/useMediaQuery.test.js
-index ba9977d1a..b5ca0ca4b 100644
+index ba9977d1a2..b5ca0ca4b9 100644
 --- a/packages/material-ui/src/useMediaQuery/useMediaQuery.test.js
 +++ b/packages/material-ui/src/useMediaQuery/useMediaQuery.test.js
 @@ -285,7 +285,7 @@ describe('useMediaQuery', () => {

scripts/use-react-dist-tag.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 /**
- * Given an environment variable called `REACT_DIST_TAG` fetch the corresponding
+ * Given the dist tag fetch the corresponding
  * version and make sure this version is used throughout the repository.
  *
  * If you work on this file:
@@ -18,7 +18,8 @@ const exec = promisify(childProcess.exec);
 // packages published from the react monorepo using the same version
 const reactPackageNames = ['react', 'react-dom', 'react-is', 'react-test-renderer', 'scheduler'];
 
-async function main(distTag) {
+async function main(options) {
+  const { distTag } = options;
   if (typeof distTag !== 'string') {
     throw new TypeError(`expected distTag: string but got '${distTag}'`);
   }
@@ -28,22 +29,24 @@ async function main(distTag) {
     return;
   }
 
-  const { stdout: versions } = await exec(`npm dist-tag ls react ${distTag}`);
-  const tagMapping = versions.split('\n').find((mapping) => {
-    return mapping.startsWith(`${distTag}: `);
-  });
-  if (tagMapping === undefined) {
-    throw new Error(`Could not find '${distTag}' in "${versions}"`);
-  }
-
-  const version = tagMapping.replace(`${distTag}: `, '');
-
   const packageJsonPath = path.resolve(__dirname, '../package.json');
   const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, { encoding: 'utf8' }));
 
-  reactPackageNames.forEach((reactPackageName) => {
-    packageJson.resolutions[reactPackageName] = version;
-  });
+  await Promise.all(
+    reactPackageNames.map(async (reactPackageName) => {
+      const { stdout: versions } = await exec(`npm dist-tag ls ${reactPackageName} ${distTag}`);
+      const tagMapping = versions.split('\n').find((mapping) => {
+        return mapping.startsWith(`${distTag}: `);
+      });
+      if (tagMapping === undefined) {
+        throw new Error(`Could not find '${distTag}' in "${versions}"`);
+      }
+
+      const version = tagMapping.replace(`${distTag}: `, '');
+
+      packageJson.resolutions[reactPackageName] = version;
+    }),
+  );
 
   // https://github.com/enzymejs/enzyme/issues/2358
   packageJson.devDependencies['enzyme-adapter-react-16'] = 'npm:@eps1lon/enzyme-adapter-react-next';
@@ -54,7 +57,8 @@ async function main(distTag) {
   await exec(`git apply ${path.resolve(__dirname, `./react-${distTag}.diff`)}`);
 }
 
-main(process.env.REACT_DIST_TAG).catch((error) => {
+const [distTag = process.env.REACT_DIST_TAG] = process.argv.slice(2);
+main({ distTag }).catch((error) => {
   console.error(error);
   process.exit(1);
 });

test/utils/createClientRender.js

@@ -10,6 +10,7 @@ import {
   queries,
   render as testingLibraryRender,
   prettyDOM,
+  within,
 } from '@testing-library/react/pure';
 
 // holes are *All* selectors which aren't necessary for id selectors
@@ -80,10 +81,12 @@ export function createClientRender(globalOptions = {}) {
   const { strict: globalStrict } = globalOptions;
 
   afterEach(async () => {
-    // If this issues an act() warning you probably didn't
-    // wait for an async event in your test (or didn't wrap it in act() at all).
-    // please wait for every update in your test and make appropriate assertions
-    await cleanup();
+    // act to flush effect cleanup functions
+    // state updates during this phase are safe
+    // TODO: Revisit once https://github.com/testing-library/react-testing-library/pull/768 is resolved.
+    await act(async () => {
+      await cleanup();
+    });
   });
 
   return function configuredClientRender(element, options = {}) {
@@ -174,6 +177,9 @@ const fireEvent = Object.assign(rtlFireEvent, {
 
 export * from '@testing-library/react/pure';
 export { act, cleanup, fireEvent };
+// We import from `@testing-library/react` and `@testing-library/dom` before creating a JSDOM.
+// At this point a global document isn't available yet. Now it is.
+export const screen = within(document.body);
 
 export function render() {
   throw new Error(

test/utils/initMatchers.js

@@ -4,6 +4,10 @@ import { isInaccessible } from '@testing-library/dom';
 import { prettyDOM } from '@testing-library/react/pure';
 import { computeAccessibleName } from 'dom-accessibility-api';
 
+function isInJSDOM() {
+  return /jsdom/.test(window.navigator.userAgent);
+}
+
 // chai#utils.elToString that looks like stringified elements in testing-library
 function elementToString(element) {
   if (typeof element?.nodeType === 'number') {
@@ -129,6 +133,7 @@ chai.use((chaiAPI, utils) => {
     }
 
     const actualName = computeAccessibleName(root, {
+      computedStyleSupportsPseudoElements: !isInJSDOM(),
       // in local development we pretend to be visible. full getComputedStyle is
       // expensive and reserved for CI
       getComputedStyle: process.env.CI ? undefined : pretendVisibleGetComputedStyle,

test/utils/setup.js

@@ -1,6 +1,12 @@
+const testingLibrary = require('@testing-library/dom');
 const createDOM = require('./createDOM');
 
 process.browser = true;
 
 createDOM();
 require('./init');
+
+testingLibrary.configure({
+  // JSDOM logs errors otherwise on `getComputedStyles(element, pseudoElement)` calls.
+  computedStyleSupportsPseudoElements: false,
+});