使用了Mantine的项目如何适配Jest

建议先阅读Next.js应用Jest + React Testing Library测试框架（上）
适用于Jest + React Testing Library的项目

1. 在jest.config.ts（如果没有则在根目录下新建）中增加如下配置，用于处理路径别名

   const config: Config = {
     // ...
     moduleNameMapper: {
       "^@testing-utils$": "<rootDir>/testing-utils/index.ts",
     },
   };
   

2. 在tsconfig.json中增加如下配置

   {
     "compilerOptions": {
       "paths": {
         "@testing-utils": ["./testing-utils"]
       },
       "types": [
         "jest"
       ]
     },
     "include": ["__tests__/**/*.ts", "__tests__/**/*.tsx", "./jest-setup.ts"],
   }
   
   

3. 运行如下命令

   npm i -D @testing-library/user-event
   

4. 根目录下新建testing-utils文件夹，新建render.tsx并粘贴如下代码，毕竟所有Mantine的组件都需要MantineProvider

   import { render as testingLibraryRender } from '@testing-library/react';
   import { MantineProvider } from '@mantine/core';
   import { theme } from "@/theme";
   
   export function render(ui: React.ReactNode) {
     return testingLibraryRender(<>{ui}</>, {
       wrapper: ({ children }: { children: React.ReactNode }) => (
         <MantineProvider theme={theme}>{children}</MantineProvider>
       ),
     });
   }
   

5. 新建/testing-utils/index.ts，后续就可以以import { render } from "@testing-utils"的方式替代@testing-library/react了

   import userEvent from '@testing-library/user-event';
   
   export * from '@testing-library/react';
   export { render } from './render';
   export { userEvent };
   

6. jest.setup.ts文件增加如下内容，处理Web环境需要的API，如果没有这个文件，则在根目录下新建，并在jest.config.ts中增加setupFilesAfterEnv: ['<rootDir>/jest.setup.ts']配置

   import '@testing-library/jest-dom';
   
   const { getComputedStyle } = window;
   window.getComputedStyle = (elt) => getComputedStyle(elt);
   window.HTMLElement.prototype.scrollIntoView = () => {};
   
   Object.defineProperty(window, 'matchMedia', {
     writable: true,
     value: jest.fn().mockImplementation((query) => ({
       matches: false,
       media: query,
       onchange: null,
       addListener: jest.fn(),
       removeListener: jest.fn(),
       addEventListener: jest.fn(),
       removeEventListener: jest.fn(),
       dispatchEvent: jest.fn(),
     })),
   });
   
   class ResizeObserver {
     observe() {}
     unobserve() {}
     disconnect() {}
   }
   
   window.ResizeObserver = ResizeObserver;
   

参考链接

Testing with Jest