使用Jest进行JavaScript单元测试
💓 博客主页：瑕疵的CSDN主页
📝 Gitee主页：瑕疵的gitee主页
⏩ 文章专栏：《热点资讯》
使用Jest进行JavaScript单元测试
- 引言
- Jest 简介
- 安装 Jest
- 创建基本配置
- 编写测试用例
- 运行测试
- 快照测试
- 模拟函数
- 代码覆盖率报告
- 最佳实践
- 保持测试独立
- 使用描述性命名
- 模拟外部依赖
- 写测试先于写代码
- 实际案例
- 总结
- 零配置：开箱即用，无需复杂的配置即可开始编写测试。
- 快照测试：支持快照测试，可以轻松捕获 UI 组件的变化。
- 模拟函数：提供强大的模拟函数功能，可以模拟外部依赖。
- 并行执行：支持并行执行测试，提高测试速度。
- 代码覆盖率报告：生成详细的代码覆盖率报告，帮助开发者了解测试覆盖情况。
npm init -y
npm install jest --save-dev
package.json 中的
test 脚本。你可以在
package.json 中添加一个测试脚本：
{
"scripts": {
"test": "jest"
}
}
__tests__ 目录下创建一个测试文件，例如
sum.test.js：
// __tests__/sum.test.js
const sum = require('../sum');
it('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
npm test
这将根据配置文件运行所有的测试用例，并输出测试结果。
快照测试是 Jest 的一个强大功能，可以捕获组件的输出并在后续测试中进行比较。例如，假设你有一个 React 组件：// components/MyComponent.js
import React from 'react';
const MyComponent = () => (
<div>
<h1>Hello, World!</h1>
</div>
);
export default MyComponent;
在测试文件中编写快照测试：
// __tests__/MyComponent.test.js
import React from 'react';
import renderer from 'react-test-renderer';
import MyComponent from '../components/MyComponent';
it('matches the snapshot', () => {
const component = renderer.create(<MyComponent />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
// src/api.js
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
return response.json();
};
module.exports = fetchData;
在测试文件中模拟 fetch 函数：
// __tests__/api.test.js
const fetchData = require('../src/api');
jest.mock('node-fetch');
it('calls the API and returns data', async () => {
global.fetch = jest.fn(() =>
Promise.resolve({
json: () => Promise.resolve({ data: 'example' })
})
);
const result = await fetchData();
expect(result).toEqual({ data: 'example' });
});
package.json 中添加一个覆盖率脚本：
{
"scripts": {
"test": "jest",
"coverage": "jest --coverage"
}
}
使用以下命令生成覆盖率报告：
npm run coverage
- 前端应用：测试 React、Vue 等前端框架的组件和逻辑。
- 后端应用：测试 Node.js 应用的业务逻辑和 API。
- 库和框架：测试第三方库和框架的功能和性能。
Jest 支持快照测试和模拟函数，可以更好地管理和验证代码的行为。
