Jest测试框架Jest测试框架详解与实践jasmine测试框架

Jest和Jasmine是两个常用的JavaScript测试框架。Jest是一个快速、灵活、可扩展的测试框架，它具有自动模拟、代码覆盖率报告等功能，可以大大提高测试效率。Jasmine是一个开源的JavaScript测试框架，主要用于Web开发中的单元测试。它提供了丰富的断言方法和实时结果反馈，方便开发者进行功能测试。在实际项目中，可以根据需求选择合适的测试框架进行使用。

本文目录导读：

Jest基本概念
Jest实践技巧

Jest是一个流行的JavaScript测试框架，由Facebook开发并维护，它具有快速、可靠和灵活的特点，广泛应用于前端和后端项目中，本文将详细介绍Jest的基本概念、使用方法以及一些实践技巧，帮助你更好地理解和应用Jest进行测试。

Jest测试框架Jest测试框架详解与实践jasmine测试框架

Jest基本概念

1、安装与配置

要使用Jest,首先需要在项目中安装它，可以通过npm或yarn进行安装：

npm install --save-dev jest

或者

yarn add --dev jest

安装完成后，需要在项目的根目录下创建一个名为jest.config.js的配置文件，用于配置Jest的行为。

module.exports = {
  preset: 'ts-jest', // 使用TypeScript类型检查
};

2、测试用例编写

Jest使用.test.ts或.test.js文件来编写测试用例，每个测试用例都应该导出一个函数，该函数的名称以test开头。

// sum.test.ts
export function testSum() {
  const result = sum(1, 2);
  expect(result).toBe(3);
}

3、测试运行器

Jest提供了一个内置的测试运行器，可以自动发现并运行所有的测试用例，你还可以使用命令行参数来控制测试行为，

--watch:实时监视文件变化并自动重新运行测试用例。

--runInBand:在同一个进程中运行测试用例，不生成HTML报告。

--verbose:显示详细的测试结果信息。

--collectCoverage:收集代码覆盖率信息。

--coverageDirectory:指定覆盖率报告的输出目录。

--coveragePathPrefix:指定覆盖率报告中源代码路径的前缀。

--rootDirs:指定测试代码的根目录。

--testPathIgnorePatterns:忽略某些文件或目录中的测试用例。

--globalTestEnvironment:设置全局的测试环境变量。

--globalTsConfigPath:指定TypeScript配置文件的路径。

--findRelatedTests:查找与当前测试用例相关的其他测试用例。

--testRegex:匹配特定正则表达式的测试用例。

--onlyTestsRegex:仅运行匹配特定正则表达式的测试用例。

--testNameRegex:匹配特定正则表达式的测试用例名称。

--filterFilePathRegex:过滤掉不符合正则表达式的文件中的测试用例。

--noTestFinderUseOnlyWorker:禁用测试查找器，仅使用Web Worker执行测试用例。

--forceExit:在每次测试失败时强制退出进程，而不是等待所有测试用例完成。

--verbose | --silent:控制输出信息的详细程度。

Jest实践技巧

1、使用快照测试(Snapshot Testing)进行UI自动化测试，Jest提供了一个名为@testing-library/react的库，可以帮助你轻松地编写基于React的快照测试用例。

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event'; // 引入用户事件库，模拟用户操作
import App from './App'; // 导入要测试的组件
test('renders input field with value', async () => {
  render(<App />); // 渲染组件
  const inputField = screen.getByLabelText('Search'); // 通过标签文本获取输入框元素
  await userEvent.type(inputField, 'hello'); // 模拟用户输入文本"hello"
  expect(inputField.value).toBe('hello'); // 验证输入框的值是否为"hello"
});

2、使用断言库(Assertion Library)进行单元测试，Jest默认集成了一组断言库，包括expect、expect.extend等，你可以根据需要选择合适的断言库进行单元测试。

import { sum } from './sum'; // 要测试的函数模块
import * as assert from 'assert'; // 引入断言库，提供更多的断言方法和工具函数
const result = sum(1, 2); // 要验证的结果值
assert.strictEqual(result, 3); // 使用assert.strictEqual进行严格相等性断言，如果结果不相等，将抛出错误并终止测试用例的执行

3、使用Mocking功能模拟外部依赖，在很多情况下，我们的测试用例需要依赖于外部服务或第三方库，为了避免这些依赖影响到我们的测试结果，我们可以使用Jest提供的Mocking功能对它们进行模拟。

// mocks/api.js (模拟API接口)
const fetchData = jest.fn().mockResolvedValue({ data: 'Hello World' }); // 定义一个返回数据的函数，并将其添加到mock列表中供后续调用时替换真实的API请求结果
export default fetchData; // 将模拟函数暴露给其他模块使用

// app.test.ts (使用模拟的API接口)
import fetchData from './mocks/api'; // 从mocks模块中导入模拟的API接口函数
import App from './App'; // 导入要测试的组件
describe('App', () => { // 定义测试套件名称和入口函数名称保持一致是最佳实践之一，有助于提高可读性