Jest 配置指南

// jest.config.js /** @type {import('jest').Config} */ const config = { testEnvironment: 'node', // 浏览器环境用 'jsdom' roots: ['<rootDir>/src'], testMatch: ['**/__tests__/**/*.ts', '**/*.spec.ts', '**/*.test.ts'], transform: { '^.+\\.tsx?$': 'ts-jest', }, moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'], collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.d.ts'], coverageDirectory: 'coverage', coverageReporters: ['text', 'lcov', 'html'], }; module.exports = config;

// jest.config.js module.exports = { moduleNameMapper: { // TypeScript/Webpack 路径别名 '^@/(.*)$': '<rootDir>/src/$1', '^@components/(.*)$': '<rootDir>/src/components/$1', // 拦截 CSS / 图片导入 '\\.css$': '<rootDir>/__mocks__/styleMock.js', '\\.(jpg|jpeg|png|gif|svg|webp)$': '<rootDir>/__mocks__/fileMock.js', }, }; // __mocks__/styleMock.js module.exports = {}; // __mocks__/fileMock.js module.exports = 'test-file-stub';

// jest.config.js module.exports = { transform: { '^.+\\.[jt]sx?$': 'babel-jest', '^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }], }, transformIgnorePatterns: [ '/node_modules/(?!(some-esm-pkg|another-pkg)/)', ], }; // babel.config.js module.exports = { presets: [ ['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript', ['@babel/preset-react', { runtime: 'automatic' }], ], };

// jest.config.js module.exports = { setupFiles: ['<rootDir>/jest.env.js'], // 框架安装前执行 setupFilesAfterFramework: ['<rootDir>/jest.setup.ts'], // 框架安装后执行 }; // jest.env.js — 设置环境变量 process.env.NODE_ENV = 'test'; process.env.API_URL = 'http://localhost:3000'; // jest.setup.ts — 添加自定义匹配器 import '@testing-library/jest-dom'; import { server } from './src/mocks/server'; beforeAll(() => server.listen()); afterEach(() => server.resetHandlers()); afterAll(() => server.close());

// jest.config.js module.exports = { collectCoverage: true, collectCoverageFrom: [ 'src/**/*.{js,ts,jsx,tsx}', '!src/**/*.d.ts', '!src/**/index.ts', '!src/**/*.stories.tsx', ], coverageDirectory: '<rootDir>/coverage', coverageReporters: ['text', 'text-summary', 'lcov', 'html', 'json'], coverageThresholds: { global: { branches: 80, functions: 85, lines: 85, statements: 85, }, }, };