@mui/internal-test-utils 1.0.19 → 1.0.21

package/src/createRenderer.tsx

@@ -1,23 +1,22 @@
 /* eslint-env mocha */
-import * as React from 'react';
-import * as ReactDOMServer from 'react-dom/server';
 import createEmotionCache from '@emotion/cache';
 import { CacheProvider as EmotionCacheProvider } from '@emotion/react';
 import {
-  act as rtlAct,
   buildQueries,
   cleanup,
-  fireEvent as rtlFireEvent,
-  queries,
-  queryHelpers,
-  render as testingLibraryRender,
   prettyDOM,
-  within,
+  queries,
   RenderResult,
+  act as rtlAct,
+  fireEvent as rtlFireEvent,
   screen as rtlScreen,
   Screen,
+  render as testingLibraryRender,
+  within,
 } from '@testing-library/react/pure';
 import { userEvent } from '@testing-library/user-event';
+import * as React from 'react';
+import * as ReactDOMServer from 'react-dom/server';
 import { useFakeTimers } from 'sinon';
 import reactMajor from './reactMajor';
 
@@ -114,8 +113,8 @@ class DispatchingProfiler implements Profiler {
 
   private renders: RenderMark[] = [];
 
-  constructor(test: import('mocha').Test) {
-    this.id = test.fullTitle();
+  constructor(id: string) {
+    this.id = id;
   }
 
   onRender: Profiler['onRender'] = (
@@ -193,18 +192,6 @@ const [
   },
 );
 
-const queryAllByMuiTest = queryHelpers.queryAllByAttribute.bind(null, 'data-mui-test');
-const [queryByMuiTest, getAllByMuiTest, getByMuiTest, findAllByMuiTest, findByMuiTest] =
-  buildQueries(
-    queryAllByMuiTest,
-    function getMultipleError(container, dataMuiTest) {
-      return `Found multiple elements with the data-mui-test attribute of: ${dataMuiTest}`;
-    },
-    function getMissingError(container, dataMuiTest) {
-      return `Found no element with the data-mui-test attribute of: ${dataMuiTest}`;
-    },
-  );
-
 const customQueries = {
   queryDescriptionOf,
   queryAllDescriptionsOf,
@@ -212,30 +199,6 @@ const customQueries = {
   getAllDescriptionsOf,
   findDescriptionOf,
   findAllDescriptionsOf,
-  /**
-   * @deprecated Use `queryAllByTestId` instead
-   */
-  queryAllByMuiTest,
-  /**
-   * @deprecated Use `queryByTestId` instead
-   */
-  queryByMuiTest,
-  /**
-   * @deprecated Use `getAllByTestId` instead
-   */
-  getAllByMuiTest,
-  /**
-   * @deprecated Use `getByTestId` instead
-   */
-  getByMuiTest,
-  /**
-   * @deprecated Use `findAllByTestId` instead
-   */
-  findAllByMuiTest,
-  /**
-   * @deprecated Use `findByTestId` instead
-   */
-  findByMuiTest,
 };
 
 interface RenderConfiguration {
@@ -375,11 +338,88 @@ export interface Clock {
 
 export type ClockConfig = undefined | number | Date;
 
+const isVitest =
+  // VITEST is present on the environment when not in browser mode.
+  process.env.VITEST === 'true' ||
+  // VITEST_BROWSER_DEBUG is present on vitest in browser mode.
+  typeof process.env.VITEST_BROWSER_DEBUG !== 'undefined';
+
+function createVitestClock(
+  defaultMode: 'fake' | 'real',
+  config: ClockConfig,
+  options: Exclude<Parameters<typeof useFakeTimers>[0], number | Date>,
+  vi: any,
+): Clock {
+  if (defaultMode === 'fake') {
+    beforeEach(() => {
+      vi.useFakeTimers(options);
+      if (config) {
+        vi.setSystemTime(config);
+      }
+    });
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+  } else {
+    beforeEach(() => {
+      if (config) {
+        vi.setSystemTime(config);
+      }
+    });
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+  }
+
+  return {
+    withFakeTimers: () => {
+      beforeEach(() => {
+        vi.useFakeTimers(options);
+      });
+      afterEach(() => {
+        vi.useRealTimers();
+      });
+    },
+    runToLast: () => {
+      traceSync('runToLast', () => {
+        rtlAct(() => {
+          vi.runOnlyPendingTimers();
+        });
+      });
+    },
+    isReal() {
+      return !vi.isFakeTimers();
+    },
+    restore() {
+      vi.useRealTimers();
+    },
+    tick(timeoutMS: number) {
+      traceSync('tick', () => {
+        rtlAct(() => {
+          vi.advanceTimersByTime(timeoutMS);
+        });
+      });
+    },
+    runAll() {
+      traceSync('runAll', () => {
+        rtlAct(() => {
+          vi.runAllTimers();
+        });
+      });
+    },
+  };
+}
+
 function createClock(
   defaultMode: 'fake' | 'real',
   config: ClockConfig,
-  options?: Exclude<Parameters<typeof useFakeTimers>[0], number | Date>,
+  options: Exclude<Parameters<typeof useFakeTimers>[0], number | Date>,
+  vi: any,
 ): Clock {
+  if (isVitest) {
+    return createVitestClock(defaultMode, config, options, vi);
+  }
+
   let clock: ReturnType<typeof useFakeTimers> | null = null;
 
   let mode = defaultMode;
@@ -467,6 +507,11 @@ export interface CreateRendererOptions extends Pick<RenderOptions, 'strict' | 's
   clock?: 'fake' | 'real';
   clockConfig?: ClockConfig;
   clockOptions?: Parameters<typeof createClock>[2];
+  /**
+   * Vitest needs to be injected because this file is transpiled to commonjs and vitest is an esm module.
+   * @default {}
+   */
+  vi?: any;
 }
 
 export function createRenderer(globalOptions: CreateRendererOptions = {}): Renderer {
@@ -475,11 +520,12 @@ export function createRenderer(globalOptions: CreateRendererOptions = {}): Rende
     clockConfig,
     strict: globalStrict = true,
     strictEffects: globalStrictEffects = globalStrict,
+    vi = (globalThis as any).vi || {},
     clockOptions,
   } = globalOptions;
   // save stack to re-use in test-hooks
   const { stack: createClientRenderStack } = new Error();
-  const clock = createClock(clockMode, clockConfig, clockOptions);
+  const clock = createClock(clockMode, clockConfig, clockOptions, vi);
 
   /**
    * Flag whether `createRenderer` was called in a suite i.e. describe() block.
@@ -531,13 +577,22 @@ export function createRenderer(globalOptions: CreateRendererOptions = {}): Rende
       throw error;
     }
 
-    const test = this.currentTest;
-    if (test === undefined) {
+    let id: string | null = null;
+
+    if (isVitest) {
+      // @ts-expect-error
+      id = expect.getState().currentTestName;
+    } else {
+      id = this.currentTest?.fullTitle() ?? null;
+    }
+
+    if (!id) {
       throw new Error(
         'Unable to find the currently running test. This is a bug with the client-renderer. Please report this issue to a maintainer.',
       );
     }
-    profiler = new UsedProfiler(test);
+
+    profiler = new UsedProfiler(id);
 
     emotionCache = createEmotionCache({ key: 'emotion-client-render' });
 

package/src/describeConformance.tsx

@@ -1,6 +1,6 @@
 /* eslint-env mocha */
-import * as React from 'react';
 import { expect } from 'chai';
+import * as React from 'react';
 import createDescribe from './createDescribe';
 import { MuiRenderResult } from './createRenderer';
 
@@ -321,7 +321,9 @@ function testSlotsProp(element: React.ReactElement<any>, getOptions: () => Confo
         const renderedElement = queryByTestId('customized');
         expect(renderedElement).not.to.equal(null);
 
-        expect(renderedElement!.nodeName.toLowerCase()).to.equal(slotElement);
+        if (typeof slotElement === 'string') {
+          expect(renderedElement!.nodeName.toLowerCase()).to.equal(slotElement);
+        }
         if (slotOptions.expectedClassName) {
           expect(renderedElement).to.have.class(slotOptions.expectedClassName);
         }
@@ -425,7 +427,9 @@ function testSlotsProp(element: React.ReactElement<any>, getOptions: () => Confo
           const renderedElement = queryByTestId('customized');
           expect(renderedElement).not.to.equal(null);
 
-          expect(renderedElement!.nodeName.toLowerCase()).to.equal(slotElement);
+          if (typeof slotElement === 'string') {
+            expect(renderedElement!.nodeName.toLowerCase()).to.equal(slotElement);
+          }
           if (slotOptions.expectedClassName) {
             expect(renderedElement).to.have.class(slotOptions.expectedClassName);
           }
@@ -617,12 +621,14 @@ function testThemeDefaultProps(
   });
 
   describe('default props provider:', () => {
-    it('respect custom default props', async function test() {
+    it('respect custom default props', async function test(t = {}) {
       const testProp = 'data-id';
       const { muiName, render, DefaultPropsProvider } = getOptions();
 
       if (!DefaultPropsProvider) {
-        this.skip();
+        // @ts-ignore
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        this?.skip?.() ?? t?.skip();
       }
 
       if (!muiName) {
@@ -634,6 +640,7 @@ function testThemeDefaultProps(
       }
 
       const { container } = await render(
+        // @ts-expect-error we skip it above.
         <DefaultPropsProvider
           value={{
             [muiName]: {
@@ -661,9 +668,11 @@ function testThemeStyleOverrides(
   getOptions: () => ConformanceOptions,
 ) {
   describe('theme style overrides:', () => {
-    it("respect theme's styleOverrides custom state", async function test() {
+    it("respect theme's styleOverrides custom state", async function test(t = {}) {
       if (/jsdom/.test(window.navigator.userAgent)) {
-        this.skip();
+        // @ts-ignore
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        this?.skip?.() ?? t?.skip();
       }
       const { muiName, testStateOverrides, render, ThemeProvider, createTheme } = getOptions();
 
@@ -716,9 +725,11 @@ function testThemeStyleOverrides(
       expect(container.firstChild).to.toHaveComputedStyle(testStyle);
     });
 
-    it("respect theme's styleOverrides slots", async function test() {
+    it("respect theme's styleOverrides slots", async function test(t = {}) {
       if (/jsdom/.test(window.navigator.userAgent)) {
-        this.skip();
+        // @ts-ignore
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        this?.skip?.() ?? t?.skip();
       }
 
       const {
@@ -827,9 +838,11 @@ function testThemeStyleOverrides(
       }
     });
 
-    it('overrideStyles does not replace each other in slots', async function test() {
+    it('overrideStyles does not replace each other in slots', async function test(t = {}) {
       if (/jsdom/.test(window.navigator.userAgent)) {
-        this.skip();
+        // @ts-ignore
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        this?.skip?.() ?? t?.skip();
       }
 
       const { muiName, classes, testStateOverrides, render, ThemeProvider, createTheme } =
@@ -905,9 +918,11 @@ function testThemeStyleOverrides(
  */
 function testThemeVariants(element: React.ReactElement<any>, getOptions: () => ConformanceOptions) {
   describe('theme variants:', () => {
-    it("respect theme's variants", async function test() {
+    it("respect theme's variants", async function test(t = {}) {
       if (/jsdom/.test(window.navigator.userAgent)) {
-        this.skip();
+        // @ts-ignore
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        this?.skip?.() ?? t?.skip();
       }
 
       const { muiName, testVariantProps, render, ThemeProvider, createTheme } = getOptions();
@@ -960,9 +975,11 @@ function testThemeVariants(element: React.ReactElement<any>, getOptions: () => C
       expect(getByTestId('without-props')).not.to.toHaveComputedStyle(testStyle);
     });
 
-    it('supports custom variant', async function test() {
+    it('supports custom variant', async function test(t = {}) {
       if (/jsdom/.test(window.navigator.userAgent)) {
-        this.skip();
+        // @ts-ignore
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        this?.skip?.() ?? t?.skip();
       }
 
       const { muiName, testCustomVariant, render, ThemeProvider, createTheme } = getOptions();
@@ -1013,12 +1030,14 @@ function testThemeCustomPalette(
   getOptions: () => ConformanceOptions,
 ) {
   describe('theme extended palette:', () => {
-    it('should render without errors', function test() {
+    it('should render without errors', function test(t = {}) {
       const { render, ThemeProvider, createTheme } = getOptions();
       if (!/jsdom/.test(window.navigator.userAgent) || !render || !ThemeProvider || !createTheme) {
-        this.skip();
+        // @ts-ignore
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        this?.skip?.() ?? t?.skip();
       }
-
+      // @ts-ignore
       const theme = createTheme({
         palette: {
           custom: {
@@ -1034,7 +1053,7 @@ function testThemeCustomPalette(
           },
         },
       });
-
+      // @ts-ignore
       expect(() => render(<ThemeProvider theme={theme}>{element}</ThemeProvider>)).not.to.throw();
     });
   });
@@ -1069,7 +1088,7 @@ function describeConformance(
   beforeEach(() => {
     originalMatchmedia = window.matchMedia;
     // Create mocks of localStorage getItem and setItem functions
-    Object.defineProperty(global, 'localStorage', {
+    Object.defineProperty(globalThis, 'localStorage', {
       value: {
         getItem: (key: string) => storage[key],
         setItem: (key: string, value: string) => {

package/src/describeSkipIf.tsx

@@ -0,0 +1,9 @@
+// Shim for vitest describe.skipIf to be able to run mocha and vitest side-by-side
+// TODO: Remove after migration to vitest is complete
+const describeSkipIf: (condition: boolean) => Mocha.PendingSuiteFunction =
+  (describe as any).skipIf ??
+  function describeSkipIf(condition: boolean) {
+    return condition ? describe.skip : describe;
+  };
+
+export default describeSkipIf;

package/src/index.ts

@@ -15,6 +15,7 @@ export {} from './initMatchers';
 export * as fireDiscreteEvent from './fireDiscreteEvent';
 export { default as flushMicrotasks } from './flushMicrotasks';
 export { default as reactMajor } from './reactMajor';
+export { default as describeSkipIf } from './describeSkipIf';
 
 /**
  * Set to true if console logs during [lifecycles that are invoked twice in `React.StrictMode`](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects) are suppressed.

package/src/initMatchers.test.js

@@ -43,13 +43,12 @@ describe('custom matchers', () => {
       expect(caughtError.stack).to.include(
         'Could not match the following console.error calls. ' +
           "Make sure previous actions didn't call console.error by wrapping them in expect(() => {}).not.toErrorDev(): \n\n" +
-          '  - "expected message"\n' +
-          '    at Context.', // `Context.it` in node 12.x, `Context.<anonymous>` in later node version
+          '  - "expected message"\n',
       );
       // check that the top stackframe points to this test
       // if this test is moved to another file the next assertion fails
       expect(caughtError.stack).to.match(
-        /- "expected message"\s+at Context\.(<anonymous>|it) \(.+\/initMatchers\.test\.js:\d+:\d+\)/,
+        /- "expected message"\s+at .*\/initMatchers\.test\.js:\d+:\d+/,
       );
     });
 
@@ -65,13 +64,12 @@ describe('custom matchers', () => {
       expect(caughtError.stack).to.include(
         'Recorded unexpected console.error calls: \n\n' +
           '  - Expected #1 "expected message" to be included in \n' +
-          '"expected Message"\n' +
-          '    at callback',
+          '"expected Message"\n',
       );
       // check that the top stackframe points to this test
       // if this test is moved to another file the next assertion fails
       expect(caughtError.stack).to.match(
-        /"expected Message"\s+at callback \(.+\/initMatchers\.test\.js:\d+:\d+\)/,
+        /"expected Message"\s+at .*\/initMatchers\.test\.js:\d+:\d+/,
       );
     });