[test] Introduce @testing-library/react

.eslintrc.js

@@ -9,7 +9,6 @@ module.exports = {
     es6: true,
     browser: true,
     node: true,
-    mocha: true,
   },
   extends: ['plugin:import/recommended', 'airbnb', 'prettier', 'prettier/react'],
   parser: 'babel-eslint',
@@ -49,18 +48,6 @@ module.exports = {
     'material-ui/docgen-ignore-before-comment': 'error',
     'material-ui/restricted-path-imports': 'error',
 
-    'mocha/handle-done-callback': 'error',
-    'mocha/no-exclusive-tests': 'error',
-    'mocha/no-global-tests': 'error',
-    'mocha/no-identical-title': 'error',
-    'mocha/no-nested-tests': 'error',
-    'mocha/no-pending-tests': 'error',
-    'mocha/no-return-and-callback': 'error',
-    'mocha/no-sibling-hooks': 'error',
-    'mocha/no-skipped-tests': 'error',
-    'mocha/no-top-level-hooks': 'error',
-    'mocha/valid-suite-description': 'error',
-
     // This rule is great for raising people awareness of what a key is and how it works.
     'react/no-array-index-key': 'off',
     'react/destructuring-assignment': 'off',
@@ -97,4 +84,32 @@ module.exports = {
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'error',
   },
+  "overrides": [
+    {
+      "files": [
+        "**/test-utils/**/*.js",
+        // matching the pattern of the test runner
+        "*.test.js",
+      ],
+      env: {
+        mocha: true,
+      },
+      "rules": {
+        // does not work with wildcard imports. Mistakes will throw at runtime anyway
+        'import/named': false,
+
+        'mocha/handle-done-callback': 'error',
+        'mocha/no-exclusive-tests': 'error',
+        'mocha/no-global-tests': 'error',
+        'mocha/no-identical-title': 'error',
+        'mocha/no-nested-tests': 'error',
+        'mocha/no-pending-tests': 'error',
+        'mocha/no-return-and-callback': 'error',
+        'mocha/no-sibling-hooks': 'error',
+        'mocha/no-skipped-tests': 'error',
+        'mocha/no-top-level-hooks': 'error',
+        'mocha/valid-suite-description': 'error',
+      }
+    }
+  ]
 };

package.json

@@ -56,6 +56,7 @@
     "@emotion/core": "^10.0.0",
     "@emotion/styled": "^10.0.0",
     "@material-ui/pickers": "^3.1.1",
+    "@testing-library/react": "^8.0.1",
     "@trendmicro/react-interpolate": "^0.5.5",
     "@types/autosuggest-highlight": "^3.1.0",
     "@types/chai": "^4.1.7",
@@ -94,6 +95,7 @@
     "babel-plugin-transform-react-remove-prop-types": "^0.4.21",
     "babel-plugin-unwrap-createStyles": "link:packages/babel-plugin-unwrap-createStyles",
     "chai": "^4.1.2",
+    "chai-dom": "^1.8.1",
     "classnames": "^2.2.6",
     "clean-css": "^4.1.11",
     "clipboard-copy": "^3.0.0",

packages/material-ui/src/ButtonBase/Ripple.test.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import { assert } from 'chai';
+import { assert, expect } from 'chai';
 import { spy, useFakeTimers } from 'sinon';
-import { getClasses, createMount } from '@material-ui/core/test-utils';
+import { getClasses } from '@material-ui/core/test-utils';
+import { cleanup, createClientRender } from 'test/utils/createClientRender';
 import TouchRipple from './TouchRipple';
 import Ripple from './Ripple';
 
@@ -11,27 +12,20 @@ describe('<Ripple />', () => {
 
   before(() => {
     classes = getClasses(<TouchRipple />);
-    mount = createMount({ strict: undefined });
+    mount = createClientRender({ strict: undefined });
   });
 
   after(() => {
-    mount.cleanUp();
-  });
-
-  it('should render a Transition', () => {
-    const wrapper = mount(
-      <Ripple classes={classes} timeout={{}} rippleX={0} rippleY={0} rippleSize={10} />,
-    );
-    assert.strictEqual(wrapper.find('Transition').exists(), true);
+    cleanup();
   });
 
   it('should have the ripple className', () => {
-    const wrapper = mount(
+    const { container } = mount(
       <Ripple classes={classes} timeout={{}} rippleX={0} rippleY={0} rippleSize={11} />,
     );
-    const rippleWrapper = wrapper.find('span').first();
-    assert.strictEqual(rippleWrapper.hasClass(classes.ripple), true);
-    assert.strictEqual(rippleWrapper.hasClass(classes.fast), false);
+    const ripple = container.querySelector('span');
+    expect(ripple).to.have.class(classes.ripple);
+    expect(ripple).not.to.have.class(classes.fast);
   });
 
   describe('starting and stopping', () => {
@@ -51,17 +45,15 @@ describe('<Ripple />', () => {
 
     it('should start the ripple', () => {
       wrapper.setProps({ in: true });
-      wrapper.update();
-      const rippleWrapper = wrapper.find('span').first();
-      assert.strictEqual(rippleWrapper.hasClass(classes.rippleVisible), true);
+      const ripple = wrapper.container.querySelector('span');
+      expect(ripple).to.have.class(classes.rippleVisible);
     });
 
     it('should stop the ripple', () => {
       wrapper.setProps({ in: true });
       wrapper.setProps({ in: false });
-      wrapper.update();
-      const childWrapper = wrapper.find('span').last();
-      assert.strictEqual(childWrapper.hasClass(classes.childLeaving), true);
+      const child = wrapper.container.querySelector('span > span');
+      expect(child).to.have.class(classes.childLeaving);
     });
   });
 
@@ -83,29 +75,26 @@ describe('<Ripple />', () => {
     });
 
     it('should render the ripple inside a pulsating Ripple', () => {
-      assert.strictEqual(wrapper.name(), 'Ripple');
-      const rippleWrapper = wrapper.find('span').first();
-      assert.strictEqual(rippleWrapper.hasClass(classes.ripple), true);
-      assert.strictEqual(rippleWrapper.hasClass(classes.ripplePulsate), true);
-      const childWrapper = wrapper.find('span').last();
-      assert.strictEqual(childWrapper.hasClass(classes.childPulsate), true);
+      const ripple = wrapper.container.querySelector('span');
+      expect(ripple).to.have.class(classes.ripple);
+      expect(ripple).to.have.class(classes.ripplePulsate);
+      const child = wrapper.container.querySelector('span > span');
+      expect(child).to.have.class(classes.childPulsate);
     });
 
     it('should start the ripple', () => {
       wrapper.setProps({ in: true });
-      wrapper.update();
-      const rippleWrapper = wrapper.find('span').first();
-      assert.strictEqual(rippleWrapper.hasClass(classes.rippleVisible), true);
-      const childWrapper = wrapper.find('span').last();
-      assert.strictEqual(childWrapper.hasClass(classes.childPulsate), true);
+      const ripple = wrapper.container.querySelector('span');
+      expect(ripple).to.have.class(classes.rippleVisible);
+      const child = wrapper.container.querySelector('span > span');
+      expect(child).to.have.class(classes.childPulsate);
     });
 
     it('should stop the ripple', () => {
       wrapper.setProps({ in: true });
       wrapper.setProps({ in: false });
-      wrapper.update();
-      const childWrapper = wrapper.find('span').last();
-      assert.strictEqual(childWrapper.hasClass(classes.childLeaving), true);
+      const child = wrapper.container.querySelector('span > span');
+      expect(child).to.have.class(classes.childLeaving);
     });
   });
 

test/utils/createClientRender.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { cleanup, render } from '@testing-library/react';
+
+function clientRender(element, options = {}) {
+  const { disableUnnmount = false, strict } = options;
+
+  if (!disableUnnmount) {
+    cleanup();
+  }
+
+  const Mode = strict ? React.StrictMode : React.Fragment;
+  const result = render(element, { wrapper: Mode });
+
+  /**
+   * convenience helper. Better than repeating all props.
+   */
+  result.setProps = function setProps(props) {
+    result.rerender(React.cloneElement(element, props));
+    return result;
+  };
+
+  return result;
+}
+
+export function createClientRender(globalOptions = {}) {
+  const { strict: globalStrict } = globalOptions;
+
+  return function configuredClientRender(element, options = {}) {
+    const { strict = globalStrict, ...localOptions } = options;
+
+    return clientRender(element, { ...localOptions, strict });
+  };
+}
+
+export * from '@testing-library/react';
+// in case someone accidentally imports `render`. we want to use a single API
+export { cleanup, clientRender as render };

test/utils/createDOM.js

@@ -31,6 +31,10 @@ function createDOM() {
         global[key] = dom.window[key];
       }
     });
+
+  // required for wait-for-expect
+  // not added by jsdom by default
+  window.Date = global.Date;
 }
 
 module.exports = createDOM;

test/utils/init.js

@@ -3,6 +3,10 @@ import enzyme from 'enzyme/build/index';
 import Adapter from 'enzyme-adapter-react-16';
 import consoleError from './consoleError';
 import { useIsSsr } from '@material-ui/core/test-utils/RenderMode';
+import chai from 'chai';
+import chaiDom from 'chai-dom';
+
+chai.use(chaiDom);
 
 consoleError();