[core] Fix test utils types and external buildApiUtils usage issues (#36310)

Author: LukasTy

packages/api-docs-builder/buildApiUtils.ts

@@ -9,9 +9,17 @@ import { replaceComponentLinks } from './utils/replaceUrl';
 import findPagesMarkdownNew from './utils/findPagesMarkdown';
 import { TypeScriptProject } from './utils/createTypeScriptProject';
 
-const systemComponents = fs
-  .readdirSync(path.resolve('packages', 'mui-system', 'src'))
-  .filter((pathname) => pathname.match(/^[A-Z][a-zA-Z]+$/));
+let systemComponents: string[] | undefined;
+// making the resolution lazy to avoid issues when importing something irrelevant from this file (i.e. `getSymbolDescription`)
+// the eager resolution results in errors when consuming externally (i.e. `mui-x`)
+function getSystemComponents() {
+  if (!systemComponents) {
+    systemComponents = fs
+      .readdirSync(path.resolve('packages', 'mui-system', 'src'))
+      .filter((pathname) => pathname.match(/^[A-Z][a-zA-Z]+$/));
+  }
+  return systemComponents;
+}
 
 function getMuiName(name: string) {
   return `Mui${name.replace('Unstyled', '').replace('Styled', '')}`;
@@ -171,7 +179,7 @@ export const getMaterialComponentInfo = (filename: string): ComponentInfo => {
     muiName: getMuiName(name),
     apiPathname: `/material-ui/api/${kebabCase(name)}/`,
     apiPagesDirectory: path.join(process.cwd(), `docs/pages/material-ui/api`),
-    isSystemComponent: systemComponents.includes(name),
+    isSystemComponent: getSystemComponents().includes(name),
     readFile() {
       srcInfo = parseFile(filename);
       return srcInfo;
@@ -282,7 +290,7 @@ export const getBaseComponentInfo = (filename: string): ComponentInfo => {
     muiName: getMuiName(name),
     apiPathname: `/base/api/${kebabCase(name)}/`,
     apiPagesDirectory: path.join(process.cwd(), `docs/pages/base/api`),
-    isSystemComponent: systemComponents.includes(name),
+    isSystemComponent: getSystemComponents().includes(name),
     readFile() {
       srcInfo = parseFile(filename);
       return srcInfo;
@@ -390,7 +398,7 @@ export const getJoyComponentInfo = (filename: string): ComponentInfo => {
     muiName: getMuiName(name),
     apiPathname: `/joy-ui/api/${kebabCase(name)}/`,
     apiPagesDirectory: path.join(process.cwd(), `docs/pages/joy-ui/api`),
-    isSystemComponent: systemComponents.includes(name),
+    isSystemComponent: getSystemComponents().includes(name),
     readFile() {
       srcInfo = parseFile(filename);
       return srcInfo;

test/utils/createMount.tsx

@@ -46,7 +46,7 @@ export default function createMount(options: CreateMountOptions = {}) {
 
   function computeTestName(test: Test | undefined) {
     let current: Test | Suite | undefined = test;
-    const titles = [];
+    const titles: string[] = [];
     while (current != null) {
       titles.push(current.title);
       current = current.parent;

test/utils/createRenderer.tsx

@@ -680,7 +680,7 @@ fireEvent.keyUp = (desiredTarget, options = {}) => {
 
 export function fireTouchChangedEvent(
   target: Element,
-  type: 'touchmove' | 'touchend',
+  type: 'touchstart' | 'touchmove' | 'touchend',
   options: { changedTouches: Array<Pick<TouchInit, 'clientX' | 'clientY'>> },
 ): void {
   const { changedTouches } = options;

test/utils/fireDiscreteEvent.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { configure, fireEvent, getConfig } from '@testing-library/react';
-import { FireFunction } from 'test/utils/createRenderer';
 
 const noWrapper = (callback: () => void) => callback();
 
@@ -46,32 +45,32 @@ function withMissingActWarningsIgnored(callback: () => void) {
 // Note that using `fireEvent` from `@testing-library/dom` would not work since /react configures both `fireEvent` to use `act` as a wrapper.
 // -----------------------------------------
 
-export function click(...args: Parameters<FireFunction>) {
+export function click(...args: Parameters<(typeof fireEvent)['click']>) {
   return withMissingActWarningsIgnored(() => {
     fireEvent.click(...args);
   });
 }
 
-export function keyDown(...args: Parameters<FireFunction>) {
+export function keyDown(...args: Parameters<(typeof fireEvent)['keyDown']>) {
   return withMissingActWarningsIgnored(() => {
     fireEvent.keyDown(...args);
   });
 }
 
-export function keyUp(...args: Parameters<FireFunction>) {
+export function keyUp(...args: Parameters<(typeof fireEvent)['keyUp']>) {
   return withMissingActWarningsIgnored(() => {
     fireEvent.keyUp(...args);
   });
 }
 
-export function mouseDown(...args: Parameters<FireFunction>) {
+export function mouseDown(...args: Parameters<(typeof fireEvent)['mouseDown']>) {
   return withMissingActWarningsIgnored(() => {
     fireEvent.mouseDown(...args);
   });
 }
 
-export function mouseUp(...args: Parameters<FireFunction>) {
+export function mouseUp(...args: Parameters<(typeof fireEvent)['mouseUp']>) {
   return withMissingActWarningsIgnored(() => {
-    fireEvent.mouseDown(...args);
+    fireEvent.mouseUp(...args);
   });
 }

test/utils/userEvent.ts

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import { click, mouseDown, mouseUp, keyDown, keyUp } from './fireDiscreteEvent';
-import { act, fireEvent, FireFunction } from './createRenderer';
+import { act, fireEvent } from './createRenderer';
 
 export function touch(target: Element): void {
   fireEvent.touchStart(target);
   fireEvent.touchEnd(target);
 }
 
-export const mousePress: (...args: Parameters<FireFunction>) => void = (target, options) => {
+export const mousePress: (...args: Parameters<(typeof fireEvent)['mouseUp']>) => void = (
+  target,
+  options,
+) => {
   if (React.version.startsWith('18')) {
     fireEvent.mouseDown(target, options);
     fireEvent.mouseUp(target, options);
@@ -20,13 +23,13 @@ export const mousePress: (...args: Parameters<FireFunction>) => void = (target,
   }
 };
 
-export function keyPress(target: Element, options: { key: string }): void {
+export function keyPress(target: Element, options: { key: string; [key: string]: any }): void {
   if (React.version.startsWith('18')) {
     fireEvent.keyDown(target, options);
     fireEvent.keyUp(target, options);
   } else {
-    keyDown(target, options as unknown as Event);
-    keyUp(target, options as unknown as Event);
+    keyDown(target, options);
+    keyUp(target, options);
     act(() => {});
   }
 }