Jest测试配置教程？看完就会写

▌ 技术引导 我见过太多人在配置Jest测试框架时，直接照搬官方文档，结果写出来的测试用例根本跑不起来，更别说覆盖率、mock函数这些高级功能。实际上，Jest的配置和测试流程远比表面复杂，尤其是在处理异步操作、mock模块、并行执行、环境变量注入和跨平台兼容这些实际场景时，很多人会因为忽略一些细节导致项目卡壳。我见过有人踩坑，因为没设置正确的testEnvironment导致DOM操作失效，还有人因为没有在testSetupFile中配置mock函数，导致所有测试都依赖真实网络请求。Jest的配置文档虽然详细，但如果你没有实际经历过这些问题，很难理解哪些配置是必须的，哪些是可选的。这篇文章会直接告诉你哪些配置项必须写，哪些可以忽略，以及最常用的几种配置方式，让你在第一天就能写出稳定、可复用、可扩展的Jest测试用例。 ▌ 技术参考 一 环境变量注入与配置隔离 Jest运行测试时，可以通过env变量控制测试环境，比如jest.config.js中的testEnvironment参数。我见过很多项目直接写死成jsdom，但实际生产环境可能需要node环境。关键点在于，如果你的测试需要访问真实API，必须将testEnvironment设为node，否则会出现很多意想不到的错误。另外，env变量也可以用来控制是否启用快照测试，比如process.env.JEST_USE_SNAPSHOT = 'true'。在jest.config.js中，你可以通过setupFilesAfterEnv来加载环境变量文件，比如setup.env.js，这样能保证测试脚本在运行前读取到正确的配置。设置环境变量时务必注意路径问题，否则模块找不到会直接报错，测试也不执行。 二 测试文件结构与命名规范 Jest会自动识别测试文件，规则是文件名以test、spec或d.ts结尾。我见过有人为了统一命名，把所有测试文件改成test.js，结果发现部分文件被忽略，是因为某些目录结构不符合默认规则。更稳妥的做法是根据项目的组织方式，使用testSetupFile来定义统一的测试初始化逻辑，比如mock函数、数据初始化等。如果项目结构复杂，可以使用testMatch来指定哪些文件需要被测试，比如testMatch: ['/src//.test.js']。这样做能避免误判，也能让测试发现更加可控。另外，jest的testPathIgnorePatterns可以用来过滤掉不需要测试的目录，比如node_modules或dist，避免因路径匹配错误导致测试遗漏。 三 快照测试与版本控制 快照测试是Jest的一个强项，但很多人误以为只要加上toMatchSnapshot就能解决所有问题。实际上，快照文件会被存储在__snapshots__目录下，文件名会和测试文件一致。如果测试文件在git中被修改，快照文件也会被记录，这会导致不必要的提交。解决方法是在jest.config.js中设置snapshotPathMapping，将生成的快照路径映射到.gitignore中。比如，snapshotPathMapping: { '/__snapshots__': '/__snapshots__' }。这能确保快照文件不会被误提交。快照测试适用于UI组件、配置文件、数据结构等场景，但不要滥用，否则会降低测试的价值，增加维护成本。 四 模块mock与jest.mock的用法 mock模块是Jest测试中比较常用的技术，但很多人用错jest.mock的参数。比如，jest.mock('my-module')会自动mock所有导出函数，但如果你只想mock某个函数，应该使用jest.spyOn来实现。如果模块是异步加载的，比如CommonJS模块，需要在jest.config.js中设置moduleNameMapper，比如moduleNameMapper: { '^my-module$': '/mocks/my-module.js' }。我见过有人mock一个API后，忘记在测试后还原，导致后续测试出现依赖污染。这时候需要用jest.restoreMocks或者jest.clearAllMocks。此外，mock函数可以设置返回值，比如jest.fn().mockReturnValue(42)，这在数据固定或模拟错误场景时特别有用。 五 并行执行与CI集成 Jest支持并行执行测试用例，但默认情况下是单线程。要开启并行，需要在jest.config.js中设置testTimeout: 10000和testURL: 'https://localhost:8080'。如果测试用例之间有依赖，比如共享全局变量，就必须关闭并行，或者使用testSequencer来控制执行顺序。在CI环境中，Jest的并行执行可能会导致某些问题，比如浏览器启动失败或资源竞争。这时候要设置maxWorkers: 1，或者使用jest-runner-serial来确保顺序执行。此外，CI中如果测试用例太多，可以考虑使用jest-parallel-tests来分批次运行测试，提高CI构建的速度。 六 异步测试与done函数 Jest的异步测试支持多种方式，比如async/await、Promise、done回调。我见过很多测试用例因为没有正确使用done导致测试提前结束，出现“Test did not exit properly”错误。解决方法是，要么用async/await，要么使用done函数并在测试结束时调用。比如：test('async test', (done) => { ... done() })。如果测试中有多个异步操作，done函数必须在所有操作完成后调用，否则测试会失败。在某些情况下，jest的默认超时时间不足以完成测试，这时候要修改testTimeout参数，比如testTimeout: 15000。另外，使用async/await时，可以配合jest.spyOn来验证异步函数的调用次数和参数。 七 覆盖率配置与报告生成 Jest的覆盖率功能非常强大，但很多人不知道如何正确配置。在jest.config.js中，coveragePathExcludes可以用来排除不需要覆盖的文件，比如node_modules或第三方库。coverageReporters默认是text-summary，但为了更直观，可以换成lcov或html。比如coverageReporters: ['lcov', 'html']。此外，coverageThreshold可以设置最低覆盖率标准，比如coverageThreshold: { global: 80 }。如果覆盖率太低，会提示你哪些文件需要改进。我见过有人因为没有设置正确的coverageDirectory导致生成的报告路径不对，测试结果也无法正确统计。这时候要确保jest.config.js中的coverageDirectory和CI的报告处理脚本路径匹配。 八 跨平台测试与CI配置 Jest在不同平台的表现差异很大，比如Windows和Linux对路径的处理方式不同。我见过有人在Windows下配置的testFilePattern是/.test.js，但在Linux下却无法识别，导致测试遗漏。解决方案是统一使用正则表达式来匹配文件路径，比如testFilePattern: '/.(spec|test).js'。此外，CI环境中可能需要单独配置jest的执行命令，比如npm run test:ci，并在其中设置CI环境变量。如果项目需要运行浏览器测试，可以使用jest-puppeteer，但要注意jest-puppeteer的版本兼容性，避免与Jest的版本冲突。跨平台测试时，测试环境变量和mock路径都必须统一，否则测试行为会不一致。 九 自定义testEnvironment与集成 Jest允许自定义testEnvironment，比如用jest-environment-jsdom来模拟浏览器环境，或者用jest-environment-node来模拟Node环境。如果项目需要定制化环境，比如支持Web Worker或特定浏览器特性，可以手动编写一个testEnvironment模块，并在jest.config.js中指定。例如，testEnvironment: './custom-environment.js'。此外，jest的testEnvironment可以与jest-puppeteer集成，实现更复杂的浏览器自动化测试。我见过有人在自定义环境时，忘记导出globalThis，导致全局变量无法被测试脚本访问，测试失败。一定要确保自定义环境能正确暴露所有必要的全局对象。 十 测试发现与testMatch配置 Jest的testMatch决定了哪些文件会被识别为测试文件。默认是/.test.js和/.spec.js，但如果你的项目结构特殊，比如测试文件在tests目录下，需要修改testMatch为'./tests//.test.js'。此外，testMatch还可以使用正则表达式，比如testMatch: ['^((?!node_modules).).(test|spec).js$']，这样能排除掉node_modules下的测试文件。在某些情况下，testMatch的正则表达式可能会导致文件匹配错误，这时候可以使用testPathIgnorePatterns来进一步过滤。比如testPathIgnorePatterns: ['/node_modules/', '/dist/']。这些配置项在大型项目中尤为重要，否则测试发现会变得混乱，导致测试遗漏或误报。 十一 快速启动与快速恢复 Jest的快速启动能力可以通过jest.config.js中的testRunner参数来控制，比如testRunner: 'jest-circus'。使用jest-circus可以加快测试启动速度，尤其是在大型项目中。但如果你的项目依赖jest-jasmine2或其他测试框架，必须保持testRunner不变。另外，Jest的快速恢复功能可以通过jest.config.js中的testFailureExitCode来控制，比如testFailureExitCode: 1。这样能确保测试失败时立即退出，而不是继续运行其他测试。在某些情况下，jest的默认恢复行为会导致测试流程变得缓慢，这时候需要手动配置testFailureExitCode为0，但要确保不会影响测试结果的可读性。 十二 报告输出与CI集成 Jest的报告输出可以通过jest.config.js中的reporters参数来配置，比如reporters: ['default', 'jest-reporters']。这能生成更详细的测试报告，帮助你快速定位问题。如果项目需要生成HTML报告，可以使用jest-html-reporters插件，但需要在jest.config.js中配置。比如reporters: ['jest-html-reporters', 'default']，并设置outputFolder为'./reports'。在CI环境中，报告输出路径需要与CI的报告处理脚本兼容，否则无法自动解析。此外，Jest的默认报告格式可能不满足需求，这时候需要用jest-junit生成JUnit格式报告，方便集成到CI的测试平台中。 十三 自定义jest配置与环境变量 Jest的配置可以通过jest.config.js或jest.config.ts来进行，但有时候需要根据运行环境动态调整配置。比如，开发环境使用jsdom，生产环境使用node。这时候可以在运行测试时通过环境变量来控制，比如JEST_ENV=development。在jest.config.js中，可以使用process.env.JEST_ENV来动态调整testEnvironment。例如：testEnvironment: process.env.JEST_ENV === 'development' ? 'jsdom' : 'node'。这样的配置能确保测试环境与开发环境一致，避免因为环境不匹配导致测试失败。此外，环境变量还可以控制是否启用快照测试或mock模块，比如process.env.JEST_SNAPSHOT = 'true'，从而实现灵活的测试策略。 十四 并行测试与测试隔离 Jest的并行测试功能可以大幅缩短测试执行时间，但必须确保测试用例之间没有共享状态。比如，如果测试用例中使用了全局变量，或者修改了全局状态，必须使用testSequencer或者testIsolation来隔离测试。testIsolation可以设置为true，这样每个测试用例会启动一个独立的Jest环境，避免污染。我见过有人在并行测试时，因为没有使用testIsolation，导致多个测试共享同一个mock对象，结果出现意外的mock行为。此外，jest的并行执行可能会导致某些测试失败，特别是涉及DOM操作或异步操作的测试，这时候需要在jest.config.js中设置testTimeout，或者使用jest-parallel-tests来分批执行测试。 十五 使用jest-puppeteer进行浏览器自动化 jest-puppeteer是Jest的一个插件，用于在浏览器中运行测试。配置时需要在jest.config.js中设置testEnvironment: 'jest-environment-puppeteer'，并安装jest-puppeteer。使用jest-puppeteer时，必须确保浏览器路径正确，比如在jest.config.js中设置browserPath。此外，测试中使用puppeteer的API，比如page.goto或page.click，必须在test前初始化，否则会报错。如果测试页面加载失败，可以使用jest-puppeteer的beforeEach钩子来设置默认页面，并在测试后关闭浏览器。这种配置适用于需要真实渲染页面的前端项目，但要注意jest-puppeteer的版本兼容性，避免与Jest的版本冲突。 十六 实践中常用配置参数与优化 在实际项目中，Jest的配置参数往往需要根据具体情况调整。比如，testEnvironment: 'jsdom'适用于前端组件测试，而testEnvironment: 'node'适用于后端逻辑测试。如果测试用例数量较大，可以使用testURL: 'https://localhost:8080'来指定测试页面的路径。另外，testTimeout可以用来调整测试超时时间，比如testTimeout: 15000。在某些项目中，testMatch被设置为'./src//.test.js'，以确保只有特定目录下的文件被测试。这些配置参数在实际项目中都非常实用，能显著提升测试的稳定性和效率，同时减少误报和漏报。 十七 模块mock与jest-mock的使用 jest-mock是Jest自带的模块mock工具，但很多人不知道它的具体用法。比如，jest.mock('my-module')会mock所有导出函数，但如果你只需要mock某个函数，应该使用jest.spyOn。此外，jest-mock支持mockImplementation和mockReturnValue，这两个参数可以用来模拟函数的行为。比如，jest.fn().mockImplementation(() => 42)。如果模块是异步加载的，比如使用require或import，需要在jest.config.js中设置moduleNameMapper，确保测试能正确找到mock模块。我见过有人在mock模块时，忘记设置正确的路径，导致测试文件找不到模拟能力，测试直接报错。 十八 jest配置与CI环境的适配 在CI环境中，Jest的配置可能需要做一些特殊调整。比如，CI可能没有安装所有依赖，这时候需要在CI的构建脚本中安装jest和相关插件。此外，CI可能需要指定具体的测试文件，比如通过testMatch参数过滤掉不需要测试的文件。还可以使用testResultsProcessor来处理测试结果，生成适合CI使用的报告格式。比如，testResultsProcessor: 'jest-junit'。这些配置能确保CI环境能正确运行测试，并生成可读的测试结果。另外，CI环境可能需要关闭某些功能，比如testIsolation，并行执行时的随机顺序，或者mock模块的自动加载，这些都需要根据实际需求进行调整。