前端Jest配置规范书

前端Jest配置规范书一、Jest基础配置文件结构Jest的核心配置通过jest.config.js文件实现，该文件采用CommonJS模块规范导出配置对象。基础结构应包含以下核心字段，确保配置的完整性和可维护性：module.exports={//测试环境配置testEnvironment:'jsdom',//测试文件匹配规则testMatch:['**/__tests__/**/*.[jt]s?(x)','**/?(*.)+(spec|test).[tj]s?(x)'],//模块文件扩展名moduleFileExtensions:['js','jsx','ts','tsx','json','node'],//模块名称映射moduleNameMapper:{'^@/(.*)$':'<rootDir>/src/$1'},//转换配置transform:{'^.+\\.(js|jsx|ts|tsx)$':'babel-jest','^.+\\.css$':'<rootDir>/config/jest/cssTransform.js','^(?!.*\\.(js|jsx|ts|tsx|css|json)$)':'<rootDir>/config/jest/fileTransform.js'},//覆盖率配置collectCoverageFrom:['src/**/*.{js,jsx,ts,tsx}','!src/**/*.d.ts'],//覆盖率报告格式coverageReporters:['json','lcov','text','clover'],//测试路径忽略模式testPathIgnorePatterns:['\\\\node_modules\\\\','\\\\.next\\\\'],//模块路径忽略模式modulePathIgnorePatterns:['<rootDir>/node_modules/'],//全局设置路径setupFilesAfterEnv:['<rootDir>/src/setupTests.js'],//快照序列化器snapshotSerializers:['enzyme-to-json/serializer'],//测试结果处理器testResultsProcessor:'jest-sonar-reporter',//并发测试数量maxWorkers:'50%',//测试超时时间testTimeout:10000,//开启缓存cache:true};二、测试环境配置规范2.1环境选择原则浏览器环境：对于React、Vue等前端框架项目，必须设置testEnvironment:'jsdom'，模拟浏览器DOM环境，确保组件测试的准确性。Node.js环境：纯Node.js项目或后端API测试，设置testEnvironment:'node'，利用原生Node.js环境提升测试性能。自定义环境：特殊场景可通过testEnvironment:'<rootDir>/custom-environment.js'引入自定义测试环境，需确保环境类正确实现Jest的Environment接口。2.2环境变量管理在setupFilesAfterEnv指定的全局设置文件中统一管理环境变量，避免在测试文件中硬编码：//src/setupTests.jsprocess.env.REACT_APP_API_URL='';process.env.NODE_ENV='test';使用dotenv库加载环境变量文件，确保测试环境与生产环境配置隔离：//jest.config.jsrequire('dotenv').config({path:'.env.test'});三、测试文件匹配与忽略规则3.1测试文件命名规范测试文件必须与被测试文件同名，并以.test.js、.test.ts、.spec.js或.spec.ts结尾，例如：被测试文件：src/utils/date.js测试文件：src/utils/date.test.js或src/utils/__tests__/date.js目录结构优先选择__tests__目录模式，保持源代码与测试代码的物理分离：src/├──utils/│├──date.js│└──__tests__/│└──date.test.js└──components/├──Button.js└──__tests__/└──Button.test.js3.2忽略规则配置必须忽略node_modules、构建输出目录（如.next、dist）和配置文件目录：testPathIgnorePatterns:['<rootDir>/node_modules/','<rootDir>/.next/','<rootDir>/dist/','<rootDir>/config/'],modulePathIgnorePatterns:['<rootDir>/node_modules/','<rootDir>/coverage/']四、模块解析与转换配置4.1模块别名配置统一使用@作为源代码根目录的别名，简化模块导入路径：moduleNameMapper:{'^@/(.*)$':'<rootDir>/src/$1','^@/components/(.*)$':'<rootDir>/src/components/$1','^@/utils/(.*)$':'<rootDir>/src/utils/$1'}确保别名配置与Webpack、TypeScript等工具的别名保持一致，避免路径解析不一致问题。4.2转换规则配置4.2.1JavaScript/TypeScript转换使用babel-jest处理ES6+和TypeScript语法，确保测试代码能被正确转译：transform:{'^.+\\.(js|jsx|ts|tsx)$':'babel-jest'}Babel配置文件需单独创建babel.config.test.js，与生产环境配置隔离：//babel.config.test.jsmodule.exports={presets:['@babel/preset-env','@babel/preset-react','@babel/preset-typescript']};4.2.2样式文件转换使用自定义转换器处理CSS、SCSS等样式文件，避免Jest尝试解析样式代码：//config/jest/cssTransform.jsmodule.exports={process(){return'module.exports={};';},getCacheKey(){return'cssTransform';}};4.2.3静态资源转换对图片、字体等静态资源使用文件转换器，返回资源路径模拟实际加载：//config/jest/fileTransform.jsconstpath=require('path');module.exports={process(src,filename){return`module.exports=${JSON.stringify(path.basename(filename))};`;}};五、覆盖率收集与报告规范5.1覆盖率收集范围仅收集源代码目录下的文件，排除类型定义文件和测试文件：collectCoverageFrom:['src/**/*.{js,jsx,ts,tsx}','!src/**/*.d.ts','!src/**/*.test.{js,jsx,ts,tsx}','!src/**/__tests__/**/*','!src/index.js']5.2覆盖率阈值设置在package.json中配置覆盖率阈值，确保代码质量达标：{"jest":{"coverageThreshold":{"global":{"branches":80,"functions":80,"lines":80,"statements":80},"./src/utils/":{"branches":90,"functions":90,"lines":90,"statements":90}}}}5.3报告格式配置同时生成多种格式的覆盖率报告，满足不同场景需求：coverageReporters:['json',//用于CI集成'lcov',//生成HTML报告'text',//控制台输出'clover',//用于SonarQube集成'cobertura'//用于Jenkins集成]六、测试框架与断言库配置6.1断言库选择优先使用Jest内置断言库，保持测试代码的一致性：test('adds1+2toequal3',()=>{expect(1+2).toBe(3);expect([1,2,3]).toContain(2);expect({name:'test'}).toEqual({name:'test'});});特殊场景可引入@testing-library/jest-dom扩展断言方法，增强DOM测试能力：//src/setupTests.jsimport'@testing-library/jest-dom';//测试文件中使用test('buttonshouldhavecorrecttext',()=>{render(<Button>ClickMe</Button>);expect(screen.getByText('ClickMe')).toBeInTheDocument();});6.2测试框架集成6.2.1React测试配置使用@testing-library/react作为React组件测试框架，配置快照序列化器：//jest.config.jssnapshotSerializers:['@testing-library/react/jest-snapshot']组件测试示例：import{render,screen}from'@testing-library/react';importButtonfrom'./Button';test('rendersbuttonwithcorrectlabel',()=>{render(<Buttonlabel="Submit"/>);expect(screen.getByRole('button')).toHaveTextContent('Submit');});6.2.2Vue测试配置引入@vue/test-utils作为Vue组件测试框架，配置VueJest转换器：//jest.config.jstransform:{'^.+\\.vue$':'vue-jest','^.+\\.(js|jsx|ts|tsx)$':'babel-jest'}Vue组件测试示例：import{mount}from'@vue/test-utils';importButtonfrom'./Button.vue';test('rendersbuttonwithcorrectlabel',()=>{constwrapper=mount(Button,{props:{label:'Submit'}});expect(wrapper.text()).toContain('Submit');});七、并发测试与性能优化7.1并发测试配置根据CPU核心数设置合理的并发测试数量，默认使用maxWorkers:'50%'，避免占用过多系统资源：//jest.config.jsmaxWorkers:process.env.CI?2:'50%'在CI环境中限制并发数，避免资源竞争导致的测试失败。7.2测试缓存策略开启Jest缓存功能，加速重复测试：//jest.config.jscache:true,cacheDirectory:'<rootDir>/.jest-cache'在package.json中添加清理缓存脚本：{"scripts":{"test:clear-cache":"jest--clearCache"}}7.3测试超时配置根据测试复杂度设置合理的超时时间，默认10秒：//jest.config.jstestTimeout:10000异步测试需明确设置超时时间，避免全局超时影响：test('asyncoperationshouldcomplete',async()=>{constresult=awaitfetchData();expect(result).toBeDefined();},15000);//单独设置超时时间八、CI/CD集成规范8.1CI环境配置在CI环境中禁用缓存，确保测试的独立性：//jest.config.jscache:process.env.CI?false:true设置CI专用的测试命令，包含覆盖率收集和报告上传：{"scripts":{"test:ci":"jest--coverage--ci--reporters=default--reporters=jest-junit","test:coverage":"jest--coverage"}}8.2测试结果报告使用jest-junit生成JUnit格式的测试报告，方便CI系统解析：//jest.config.jsreporters:['default',['jest-junit',{outputDirectory:'test-results',outputName:'junit.xml'}]]配置SonarQube集成，实现代码质量与测试覆盖率的可视化分析：//jest.config.jstestResultsProcessor:'jest-sonar-reporter'九、特殊场景配置9.1国际化测试配置模拟react-i18next等国际化库，确保多语言场景下的测试正确性：//src/setupTests.jsimporti18nfrom'i18next';import{initReactI18next}from'react-i18next';i18n.use(initReactI18next).init({resources:{en:{translation:require('./locales/en.json')}},lng:'en',fallbackLng:'en',interpolation:{escapeValue:false}});9.2定时器测试配置使用Jest内置的定时器模拟功能，避免真实时间等待：test('timershouldtriggercallback',()=>{jest.useFakeTimers();constcallback=jest.fn();setTimeout(callback,1000);jest.advanceTimersByTime(1000);expect(callback).toHaveBeenCalled();jest.useRealTimers();});9.3网络请求模拟使用jest.mock模拟Axios等HTTP客户端，避免真实网络请求：importaxiosfrom'axios';importfetchDatafrom'./fetchData';jest.mock('axios');test('fetchDatashouldreturncorrectdata',async()=>{constmockData={data:{id:1,name:'Test'}};axios.get.mockResolvedValue(mockData);constresult=awaitfetchData(1);expect(result).toEqual(mockData.data);expect(axios.get).toHaveBeenCalledWith('/data/1');});十、配置文件维护与版本控制10.1配置文件拆分复杂项目可将Jest配置拆分为多个文件，提高可维护性：config/├──jest/│├──base.config.js│├──client.config.js│├──server.config.js│└──transform/│├──cssTransform.js│└──fileTransform.js└──jest.config.js主配置文件通过require导入拆分的配置：//jest.config.jsconstbase