章
目
录
Jest作为一款由Facebook开发的JavaScript测试框架，因其简单易用、功能强大，受到了广大开发者的青睐。今天，咱们就来详细讲讲Jest的基础使用方法，从环境安装与配置，到各种测试场景的应用，帮助大家快速上手。
一、环境安装与配置
（一）安装Jest
要在项目中使用Jest，首先得安装它。通过npm（Node Package Manager）安装Jest非常简单，在项目目录下的终端中执行以下命令：
npm install --save-dev jest
这条命令中的--save-dev参数表示将Jest安装为开发依赖，因为它主要用于开发过程中的测试，而不是生产环境。
安装完成后，为了方便运行测试，还需要在package.json文件中配置测试命令。打开package.json文件，在scripts字段中添加如下内容：
{
"scripts": {
"test": "jest"
}
}
这样，以后在终端中输入npm test，就可以直接运行Jest测试了。
（二）Jest配置
- 生成配置文件：运行下面的命令，Jest会根据项目情况为你生成一份配置文件：
npm init jest@latest
这份配置文件能帮助Jest更好地适应你的项目需求，比如指定测试文件的路径、测试环境等。
2. 配置测试环境：如果你的项目需要在jsdom环境下进行测试（jsdom是一个能够模拟浏览器环境的工具，在前端测试中很常用），那就需要安装jest-environment-jsdom。安装命令如下：
npm install --save-dev jest-environment-jsdom
安装完成后，Jest就可以在jsdom环境中运行测试了。
（三）使用Babel
- 安装Babel依赖：Babel是一个JavaScript编译器，它可以将现代JavaScript代码转换为旧版本的代码，以确保代码在不同环境中都能正常运行。在使用Jest时，安装Babel相关依赖是很常见的操作，命令如下：
npm install --save-dev babel-jest @babel/core @babel/preset-env
这些依赖分别是：babel-jest用于在Jest中集成Babel；@babel/core是Babel的核心功能库；@babel/preset-env则是一组预设，能根据目标环境自动确定需要转换的语法。
2. 配置Babel：在项目根目录下创建babel.config.js文件，并添加如下内容：
module.exports = {
presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};
这段代码的意思是，使用@babel/preset-env预设，并指定目标环境为当前的Node.js版本，这样Babel就会根据这个配置来转换代码。
（四）配置TypeScript支持
- 安装依赖：如果你的项目使用TypeScript进行开发，那还需要安装一些额外的依赖，让Jest能够支持TypeScript。执行以下命令安装：
npm install --save-dev jest typescript @types/jest @babel/core @babel/preset-env @babel/preset-typescript
这里的jest是测试框架本身；typescript是TypeScript编译器；@types/jest提供了Jest的类型定义文件，方便在TypeScript中使用Jest；Babel相关的依赖则用于将TypeScript代码转换为JavaScript代码，因为Jest默认不支持直接运行TypeScript。
2. 配置方式：配置TypeScript支持有两种主流方式，分别是使用Babel和使用ts-jest。
– 使用Babel：先创建.babelrc文件，并添加如下配置：
{
"presets": [
["@babel/preset-env", { "targets": { "node": "current" } }],
"@babel/preset-typescript"
]
}
然后在jest.config.js中进行如下配置：
module.exports = {
transform: {
"^.+\.tsx?$": "babel-jest",
},
testRegex: "(/__tests__/.*|(\.|/)(test|spec))\.(jsx?|tsx?)$",
moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
};
- **使用`ts-jest`**：先安装`ts-jest`：
npm install --save-dev ts-jest
再在jest.config.js中配置：
module.exports = {
preset: "ts-jest",
testEnvironment: "node",
testRegex: "(/__tests__/.*|(\.|/)(test|spec))\.tsx?$",
};
- 配置TypeScript：如果项目中还没有
tsconfig.json文件，那就需要创建一个，并添加如下内容：
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"esModuleInterop": true,
"strict": true,
"types": ["jest"]
}
}
这些配置项可以让TypeScript更好地与Jest配合工作。
（五）报错处理
有时候，在配置过程中可能会遇到这样的报错：“You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously or when using the Node.js --experimental-require-module flag.”这通常是因为package.json中包含"type": "module"，它会强制项目使用ES模块，可能与Jest的配置产生冲突。
解决这个问题有两种方法：如果项目不需要全局使用ES模块，直接移除"type": "module"这一行；如果需要保留，那就把Babel配置文件名改为babel.config.cjs（CommonJS格式）。
二、基础测试示例
（一）基础断言/匹配器
在Jest中，断言/匹配器用于判断测试结果是否符合预期。下面是一些常见的匹配器及其用法：
toBe：用于判断基本数据类型是否相等。比如数字、字符串等。toEqual：主要用于判断对象或数组的内容是否相等。它会深入比较对象或数组的每个属性和元素。toBeNull：判断值是否为null。toBeUndefined：判断值是否为undefined。toBeTruthy：判断值是否为真值。像true、非空字符串、非零数字、非空对象等都是真值。toBeFalsy：判断值是否为假值。比如false、null、undefined、空字符串、数字0等都是假值。toHaveLength：用于判断数组或字符串的长度是否符合预期。toHaveProperty：判断对象是否具有某个属性，还可以指定属性的值。
来看个示例代码：
test('matcher examples', () => {
const num = 1;
const obj = { a: 1, b: 2 };
const arr = [1, 2, 3];
expect(num).toBe(1);
expect(obj).toEqual({ a: 1, b: 2 });
expect(null).toBeNull();
expect(undefined).toBeUndefined();
expect(true).toBeTruthy();
expect(false).toBeFalsy();
expect(arr).toHaveLength(3);
expect(obj).toHaveProperty('a', 1);
});
在这个示例中，分别使用了不同的匹配器对变量进行断言，确保它们的值符合预期。
（二）异步测试
在实际开发中，异步操作很常见，比如网络请求、定时器等。Jest也提供了很好的支持来测试异步代码。
- Promise测试：如果函数返回一个Promise，可以这样进行测试：
test('Promise 返回数据', () => {
return fetchData().then(data => {
expect(data).toBe('peanut butter');
});
});
这里的fetchData是一个返回Promise的函数，通过then方法获取Promise的返回值，并进行断言。
2. async/await测试：使用async/await语法来测试异步代码会更加简洁直观：
test('Async/Await 测试', async () => {
const data = await fetchData();
expect(data).toBe('peanut butter');
});
在这个示例中，await关键字等待fetchData函数执行完成，并返回结果，然后再进行断言。
（三）mock函数
mock函数在测试中非常有用，它可以用来模拟API调用、模块依赖等，让测试更加可控。
比如，创建一个mock函数并设置固定返回值：
const mockFn = jest.fn();
mockFn.mockReturnValue(42); // 固定返回值
然后在测试中验证这个mock函数的调用情况：
test('Mock 函数调用', () => {
expect(mockFn()).toBe(42);
expect(mockFn).toHaveBeenCalled(); // 验证是否被调用
});
在这个测试中，先验证mockFn的返回值是否为42，再验证这个函数是否被调用过。
（四）钩子函数
钩子函数可以在测试前后执行一些公共逻辑，比如初始化数据、清理资源等。Jest中常用的钩子函数有beforeEach、afterEach、beforeAll、afterAll 。
例如，在每个测试用例执行前初始化数据：
let data;
beforeEach(() => {
data = initializeData(); // 每个测试前重置数据
});
test('数据初始化', () => {
expect(data).toBeDefined();
});
在这个示例中，beforeEach钩子函数会在每个测试用例执行前调用initializeData函数来初始化data变量，然后在测试用例中验证data是否被正确初始化。
（五）快照测试
快照测试可以捕获组件或数据结构的输出，防止意外修改。首次运行测试时会生成快照文件，后续测试会将新的输出与快照文件进行对比，如果不匹配，测试就会失败。
以下是一个简单的示例：
test('组件渲染快照', () => {
const component = renderer.create(<Button />);
expect(component.toJSON()).toMatchSnapshot();
});
在这个示例中，使用renderer.create方法创建一个组件实例，然后通过toMatchSnapshot方法将组件的JSON表示与快照文件进行对比。
通过以上内容，相信大家对Jest的基础使用有了一定的了解。在实际项目中，合理运用这些测试方法，能够有效提高代码质量，减少潜在的问题。希望大家可以多实践，熟练掌握Jest自动化测试技术。
