Jest 是一个 Facebook 开源的单元测试框架，随着前端应用越来越大，测试的重要性也越来越凸显出来。初学 Jest，你应该掌握一些基本的文件，以便更好地使用 Jest 测试你的代码。在本篇文章中，我将介绍三个文件：package.json、jest.config.js、babel.config.js。
package.json
package.json 文件是一个存储项目元数据的 JSON 文件。它是每一个 Node.js 项目的必备文件之一，用于定义项目的名称、版本号以及依赖库等信息。在 Jest 中，package.json 文件主要用于存储 Jest 的依赖和配置信息。
首先，你需要安装 Jest：
npm install jest --save-dev
安装 Jest 后，在 package.json 文件中添加以下配置：
{
"name": "your-package-name",
"version": "1.0.0",
"scripts": {
"test": "jest"
},
"devDependencies": {
"jest": "^26.6.3"
}
}这个配置告诉 Jest 在运行测试时使用 jest 命令。scripts 属性是一个对象，用于存储运行脚本和命令的键值对。"test": "jest" 表示运行 jest 命令来执行测试。devDependencies 属性是一个对象，用于存储依赖的开发库。在这个配置中，我们将 Jest 的版本号存储在 devDependencies 中。
jest.config.js
jest.config.js 文件是 Jest 的配置文件，用于配置 Jest 的行为。该文件可以存储一些常用配置，以便在每次运行测试时自动使用它们。例如：
module.exports = {
testEnvironment: 'jsdom',
coverageDirectory: 'coverage',
collectCoverageFrom: [
'src/**/*.{js,jsx,ts,tsx}',
'!src/**/*.d.ts'
],
coverageThreshold: {
global: {
branches: 90,
functions: 90,
lines: 90,
statements: 90
}
}
};在上述配置文件中，我们设置了以下选项：
testEnvironment：设置测试环境，例如运行在浏览器中的测试环境jsdom。coverageDirectory：存储测试覆盖率报告的文件夹。collectCoverageFrom：指定收集测试覆盖率的文件和文件夹。coverageThreshold：设置测试覆盖率的阈值。
你可以在 jest.config.js 文件中添加更多的配置选项以满足你的需求。
babel.config.js
当使用 Jest 测试 ES6 或更高版本的 JavaScript 代码时，你需要通过 babel 转换代码，以便 Jest 正确运行测试。babel.config.js 文件用于配置 babel 转换器。
module.exports = {
presets: [
['@babel/preset-env', { targets: { node: 'current' } }],
'@babel/preset-react'
]
};在上述配置文件中，我们设置了 babel 转换器使用两个预设，这意味着将代码转换成支持当前 node 版本的 JavaScript，并且支持 React。
示例代码
下面是一段使用 Jest 测试函数的示例代码：
function sum(a, b) {
return a + b;
}
describe('sum function', () => {
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
});在这个示例中，我们编写了一个 sum 函数，然后编写一个测试用例来测试这个函数。我们使用 Jest 的 describe 函数来描述我们要测试的函数。其中，test 函数用于定义测试用例，并使用 Jest 的 expect 函数来测试函数的返回结果。
总结
以上便是初学 Jest，你应该掌握的三个文件。通过正确的配置和测试，你可以更加轻松地维护你的前端应用。如果你还想深入学习 Jest，可以查看 Jest 的官方文档。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65aa5243add4f0e0ff3ef5bf