[test] Update tests with latest state of StrictMode compatibility

Author: eps1lon

packages/material-ui-lab/src/CalendarPicker/CalendarPicker.test.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
+import { SinonFakeTimers, useFakeTimers } from 'sinon';
 import { fireEvent, screen, describeConformanceV5 } from 'test/utils';
 import CalendarPicker, { calendarPickerClasses as classes } from '@material-ui/lab/CalendarPicker';
 import {
@@ -10,6 +11,15 @@ import {
 } from '../internal/pickers/test-utils';
 
 describe('<CalendarPicker />', () => {
+  let clock: SinonFakeTimers;
+  beforeEach(() => {
+    clock = useFakeTimers();
+  });
+  afterEach(() => {
+    clock.restore();
+  });
+
+  // StrictModeViolation: Uses StrictMode incompatible API of `react-transition-group`
   const render = createPickerRender({ strict: false });
 
   describeConformanceV5(<CalendarPicker date={adapterToUse.date()} onChange={() => {}} />, () => ({

packages/material-ui-lab/src/DesktopDatePicker/DesktopDatePicker.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy } from 'sinon';
+import { SinonFakeTimers, spy, useFakeTimers } from 'sinon';
 import TextField from '@material-ui/core/TextField';
 import { TransitionProps } from '@material-ui/core/transitions';
 import { act, fireEvent, screen, userEvent } from 'test/utils';
@@ -42,6 +42,14 @@ const UncontrolledOpenDesktopDatePicker = (({
 }) as typeof DesktopDatePicker;
 
 describe('<DesktopDatePicker />', () => {
+  let clock: SinonFakeTimers;
+  beforeEach(() => {
+    clock = useFakeTimers();
+  });
+  afterEach(() => {
+    clock.restore();
+  });
+  // StrictModeViolation: Uses CalendarPicker
   const render = createPickerRender({ strict: false });
 
   it('prop: components.OpenPickerIcon', () => {

packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy } from 'sinon';
+import { SinonFakeTimers, spy, useFakeTimers } from 'sinon';
 import { act, describeConformance, screen, fireEvent, userEvent } from 'test/utils';
 import { createTheme, ThemeProvider } from '@material-ui/core/styles';
 import TextField, { TextFieldProps } from '@material-ui/core/TextField';
@@ -23,14 +23,15 @@ const defaultRangeRenderInput = (startProps: TextFieldProps, endProps: TextField
 );
 
 describe('<DesktopDateRangePicker />', () => {
-  const render = createPickerRender({ strict: false });
-
-  before(function beforeHook() {
-    if (!/jsdom/.test(window.navigator.userAgent)) {
-      // FIXME This test suite is extremely flaky in test:karma
-      this.skip();
-    }
+  let clock: SinonFakeTimers;
+  beforeEach(() => {
+    clock = useFakeTimers();
   });
+  afterEach(() => {
+    clock.restore();
+  });
+  // StrictModeViolation: Uses CalendarPicker
+  const render = createPickerRender({ strict: false });
 
   describeConformance(
     <DesktopDateRangePicker

packages/material-ui-lab/src/MobileDatePicker/MobileDatePicker.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy, useFakeTimers, SinonFakeTimers } from 'sinon';
 import TextField from '@material-ui/core/TextField';
-import { fireEvent, screen } from 'test/utils';
+import { act, fireEvent, screen } from 'test/utils';
 import PickersDay from '@material-ui/lab/PickersDay';
 import CalendarPickerSkeleton from '@material-ui/lab/CalendarPickerSkeleton';
 import MobileDatePicker from '@material-ui/lab/MobileDatePicker';
@@ -16,7 +16,14 @@ import {
 } from '../internal/pickers/test-utils';
 
 describe('<MobileDatePicker />', () => {
-  const render = createPickerRender({ strict: false });
+  let clock: SinonFakeTimers;
+  beforeEach(() => {
+    clock = useFakeTimers(new Date());
+  });
+  afterEach(() => {
+    clock.restore();
+  });
+  const render = createPickerRender();
 
   it('Accepts date on `OK` button click', () => {
     const onChangeMock = spy();
@@ -267,39 +274,29 @@ describe('<MobileDatePicker />', () => {
     expect(screen.getByText('July')).toBeVisible();
   });
 
-  describe('mock time', () => {
-    let clock: SinonFakeTimers;
-
-    beforeEach(() => {
-      clock = useFakeTimers(new Date());
-    });
-
-    afterEach(() => {
-      clock.restore();
-    });
-
-    it('prop `showTodayButton` – accept current date when "today" button is clicked', () => {
-      const onCloseMock = spy();
-      const handleChange = spy();
-      render(
-        <MobileDatePicker
-          renderInput={(params) => <TextField {...params} />}
-          showTodayButton
-          cancelText="stream"
-          onClose={onCloseMock}
-          onChange={handleChange}
-          value={adapterToUse.date('2018-01-01T00:00:00.000')}
-          DialogProps={{ TransitionComponent: FakeTransitionComponent }}
-        />,
-      );
-      const start = adapterToUse.date();
-      fireEvent.click(screen.getByRole('textbox'));
+  it('prop `showTodayButton` – accept current date when "today" button is clicked', () => {
+    const onCloseMock = spy();
+    const handleChange = spy();
+    render(
+      <MobileDatePicker
+        renderInput={(params) => <TextField {...params} />}
+        showTodayButton
+        cancelText="stream"
+        onClose={onCloseMock}
+        onChange={handleChange}
+        value={adapterToUse.date('2018-01-01T00:00:00.000')}
+        DialogProps={{ TransitionComponent: FakeTransitionComponent }}
+      />,
+    );
+    const start = adapterToUse.date();
+    fireEvent.click(screen.getByRole('textbox'));
+    act(() => {
       clock.tick(10);
-      fireEvent.click(screen.getByText(/today/i));
-
-      expect(onCloseMock.callCount).to.equal(1);
-      expect(handleChange.callCount).to.equal(1);
-      expect(adapterToUse.getDiff(handleChange.args[0][0], start)).to.equal(10);
     });
+    fireEvent.click(screen.getByText(/today/i));
+
+    expect(onCloseMock.callCount).to.equal(1);
+    expect(handleChange.callCount).to.equal(1);
+    expect(adapterToUse.getDiff(handleChange.args[0][0], start)).to.equal(10);
   });
 });

packages/material-ui-lab/src/MobileDateTimePicker/MobileDateTimePicker.test.tsx

@@ -17,6 +17,7 @@ describe('<MobileDateTimePicker />', () => {
     clock.restore();
   });
 
+  // StrictModeViolation: Uses CalendarPicker
   const render = createPickerRender({ strict: false });
 
   it('opens dialog on textField click for Mobile mode', () => {

packages/material-ui-lab/src/StaticDatePicker/StaticDatePicker.test.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
+import { SinonFakeTimers, useFakeTimers } from 'sinon';
 import TextField from '@material-ui/core/TextField';
 import { fireEvent, screen } from 'test/utils';
 import StaticDatePicker from '@material-ui/lab/StaticDatePicker';
@@ -11,7 +12,15 @@ import {
 } from '../internal/pickers/test-utils';
 
 describe('<StaticDatePicker />', () => {
-  const render = createPickerRender({ strict: false });
+  let clock: SinonFakeTimers;
+  beforeEach(() => {
+    clock = useFakeTimers();
+  });
+  afterEach(() => {
+    clock.restore();
+  });
+
+  const render = createPickerRender();
 
   it('render proper month', () => {
     render(

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

@@ -12,6 +12,7 @@ import StylesProvider from '../StylesProvider';
 import ThemeProvider from '../ThemeProvider';
 
 describe('makeStyles', () => {
+  // StrictModeViolation: uses `useSynchronousEffect`
   const mount = createMount({ strict: null });
 
   /**