Jest 是目前前端自动化测试领域的翘楚之一。它不仅支持常见的测试场景，例如单元测试、集成测试等，而且还支持自动化测试的方方面面，例如 Mock、Snapshot、覆盖率等。但是，在 Jest 运行测试时，我们经常需要将测试结果保存下来以便在外部使用，例如和其他工具进行对比或者生成报告等。那么，本文将介绍如何在 Jest 运行测试时，保留测试结果并在外部使用。
1. 使用 Jest 的 JUnit reporter
Jest 内置了多个测试结果报告器，其中最常用的是 JUnit 报告器。它生成的测试结果格式与 JUnit 测试框架的测试结果格式类似，可以方便地在多种自动化测试工具中使用，例如 Jenkins 等。了解更多 Jest 的测试报告器，请阅读 Jest 的文档。
要使用 JUnit 报告器，需要在 Jest 的配置文件中设置 testResultsProcessor 选项。具体步骤如下：
- 安装
jest-junit模块。
npm i -D jest-junit
- 在 Jest 的配置文件中，添加以下代码：
module.exports = {
testResultsProcessor: 'jest-junit', // 设置使用 JUnit 报告器
...
}- 运行 Jest，测试结果会生成在
junit.xml文件中，格式与 JUnit 测试框架的测试结果格式类似。
2. 使用 jest-html-reporters
如果需要生成更美观、易于查看的测试报告，可以使用 jest-html-reporters 模块。它可以将 Jest 的测试结果转换成 HTML 格式，并支持按照测试结果分组，方便排查问题。
要使用 jest-html-reporters，需要安装并配置它。具体步骤如下：
- 安装
jest-html-reporters模块。
npm i -D jest-html-reporters
- 在 Jest 的配置文件中，添加以下代码：
const { HTMLReporter } = require('jest-html-reporters');
module.exports = {
reporters: [new HTMLReporter({
pageTitle: 'My Jest Test Report' // 设置报告页的标题
})],
...
}- 运行 Jest，测试结果会生成在
test-report.html文件中，可以在浏览器中打开。
3. 使用 jest-junit 和 jest-html-reporters
如果需要在一个测试运行期间，同时生成 JUnit 和 HTML 格式的测试报告，可以使用 jest-junit 和 jest-html-reporters 两个模块，它们可以完美地结合使用。
要使用两个模块，只需要安装它们并在 Jest 配置文件中配置即可。具体步骤如下：
- 安装
jest-junit和jest-html-reporters模块。
npm i -D jest-junit jest-html-reporters
- 在 Jest 的配置文件中，添加以下代码：
// javascriptcn.com 代码示例
const { HTMLReporter } = require('jest-html-reporters');
module.exports = {
testResultsProcessor: 'jest-junit', // 设置使用 JUnit 报告器
reporters: [new HTMLReporter({ // 设置使用 HTML 报告器
pageTitle: 'My Jest Test Report', // 设置报告页的标题
outputPath: 'test-report.html' // 设置输出路径
})],
...
}- 运行 Jest，测试结果会生成在
junit.xml和test-report.html文件中，可以在浏览器中打开后者。
总结
在 Jest 运行测试时，保留测试结果并在外部使用非常重要。本文介绍了三种方法，分别是使用 Jest 的 JUnit reporter、使用 jest-html-reporters 和使用 jest-junit 和 jest-html-reporters 两个模块。这些方法可以帮助我们更好地管理测试结果，提高自动化测试的效率和可靠性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6548c78d7d4982a6eb309cb8