前端测试工具（Jest与Mock）

🕗 发布于 2024-11-22 12:18 前端测试工具

Jest 工具详解：从安装到使用**

Jest 是一个流行的 JavaScript 测试框架，广泛用于 React 应用及其他 JavaScript 项目的测试。它是由 Facebook 创建的，具有简单、快速、功能强大的特点。

一、Jest 的安装

1.1 环境准备

Jest 需要运行在 Node.js 环境下，所以在开始之前需要确保已经安装了 Node.js 和 npm/yarn。

下载 Node.js: Node.js 官网

1.2 安装 Jest

可以使用 npm 或 yarn 安装 Jest：

# 使用 npm 安装
npm install --save-dev jest

# 使用 yarn 安装
yarn add --dev jest

1.3 验证安装

安装完成后，可以在 package.json 文件中添加测试脚本：

"scripts": {
  "test": "jest"
}

运行以下命令以确保安装成功：

npm test

如果显示 Jest 的版本信息或测试框架初始化成功，则说明安装成功。

二、基本使用

2.1 创建测试文件

Jest 默认寻找以 .test.js 或 .spec.js 结尾的文件，或者位于 __tests__ 文件夹中的文件。例如：

sum.test.js
__tests__/sum.js

2.2 编写第一个测试

创建一个简单的加法函数：

// sum.js
function sum(a, b) {
  return a + b;
}
module.exports = sum;

为其编写测试用例：

// sum.test.js
const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

运行测试：

npm test

输出结果：

PASS  ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)

三、Jest 的核心功能

3.1 匹配器（Matchers）

Jest 提供了多种匹配器来验证测试结果：

// 基本匹配
expect(4 + 4).toBe(8);
expect({ a: 1 }).toEqual({ a: 1 });

// 异常匹配
expect(() => { throw new Error('error') }).toThrow('error');

// 异步操作
await expect(Promise.resolve(10)).resolves.toBe(10);
await expect(Promise.reject('error')).rejects.toBe('error');

3.2 Mock（模拟函数）

Mock 是 Jest 中的核心功能，用于模拟函数的实现、捕获函数调用或替代模块行为。

3.2.1 模拟函数

const mockFn = jest.fn();

mockFn(10, 20);
expect(mockFn).toHaveBeenCalledWith(10, 20);

3.2.2 模拟模块

可以使用 jest.mock() 替代模块：

jest.mock('./api', () => ({
  fetchData: jest.fn(() => Promise.resolve('mocked data')),
}));

3.3 测试异步代码

Jest 提供了对异步代码的内置支持：

// 使用 async/await 测试异步代码
test('fetches data correctly', async () => {
  const data = await fetchData();
  expect(data).toBe('mocked data');
});

3.4 快照测试（Snapshot Testing）

快照测试用于验证 UI 是否与预期一致：

// 生成或匹配快照
test('renders correctly', () => {
  const tree = renderer.create(<MyComponent />).toJSON();
  expect(tree).toMatchSnapshot();
});

四、Jest 的核心内容与思想

4.1 核心思想

Jest 的核心思想是简单、快速、零配置，并鼓励编写可维护的测试代码。它强调：

隔离性：测试模块应独立运行，互不影响。
断言驱动：通过丰富的匹配器提供明确的断言机制。
模拟与快照：简化对依赖的控制，支持验证 UI 的一致性。

4.2 核心特性

零配置：开箱即用，适用于大多数 JavaScript 项目。
内置 Mock 功能：简化对外部依赖的控制。
并行测试：默认启用多线程，提高测试速度。
代码覆盖率：可通过 --coverage 生成代码覆盖率报告。
内置支持异步：支持 Promise 和 async/await 的测试。

4.3 与其他测试框架的对比

与 Mocha：Jest 内置断言库、Mock 和快照功能，而 Mocha 通常需要结合其他工具（如 Chai、Sinon）。
与 Jasmine：Jest 是 Jasmine 的增强版，功能更全面，生态更强大。

总结

Jest 是一个强大的 JavaScript 测试框架，其核心思想是通过高效的工具和丰富的功能帮助开发者编写可靠、可维护的测试。学习和使用 Jest 可以显著提高项目的质量和开发体验，从简单的单元测试到复杂的集成测试，它都能轻松胜任。

Mock 工具详解：从安装到使用

Mock 工具是前端开发和测试过程中不可或缺的工具，主要用于模拟数据、依赖或行为，以便在没有真实数据或服务的情况下进行开发和测试。

一、Mock 的基本概念

1.1 什么是 Mock？

Mock 是一种测试技术，用于模拟真实的依赖（如函数、对象、模块或 API）。在实际开发中，Mock 常用于：

替代网络请求返回的数据。
模拟依赖的行为（函数调用、方法执行）。
捕获依赖的调用信息。

Mock 的作用：

隔离测试环境：确保测试独立于外部依赖。
提高测试效率：无需等待真实服务响应或部署。
覆盖边界场景：模拟各种特殊条件（超时、错误等）。

1.2 Mock 的类型

数据 Mock：模拟 API 返回的数据（如 JSON 文件）。
函数 Mock：模拟函数的调用行为和返回值。
模块 Mock：替换整个模块或库。
拦截 Mock：拦截网络请求，返回模拟数据。

二、Mock 工具的安装与使用

2.1 常见 Mock 工具介绍

Jest Mock 功能：内置支持函数和模块 Mock。
Mock.js：专注于数据 Mock，生成随机数据，适合 API 模拟。
Sinon.js：功能强大的函数和对象 Mock 工具，支持间谍（spy）、存根（stub）和 Mock。
msw（Mock Service Worker）：拦截 HTTP 请求，模拟后端 API。

2.2 使用 Jest 进行 Mock

安装

Jest 内置 Mock 功能，无需额外安装，只需安装 Jest 即可：

npm install --save-dev jest

Mock 函数

// sum.js
function fetchData() {
  return 'real data';
}
module.exports = fetchData;

// sum.test.js
const fetchData = require('./sum');

test('mock function example', () => {
  // Mock 原始函数
  const mockFn = jest.fn(() => 'mocked data');
  expect(mockFn()).toBe('mocked data');
  expect(mockFn).toHaveBeenCalled();
});

Mock 模块

// 模拟一个模块
jest.mock('./api', () => ({
  fetchData: jest.fn(() => Promise.resolve('mocked data')),
}));

// 使用 Mock 模块
const { fetchData } = require('./api');

test('mock module example', async () => {
  const data = await fetchData();
  expect(data).toBe('mocked data');
  expect(fetchData).toHaveBeenCalled();
});

2.3 使用 Mock.js 进行数据模拟

安装

npm install mockjs --save-dev

基本使用

Mock.js 提供随机生成结构化数据的能力：

const Mock = require('mockjs');

// 定义数据模板
const template = {
  'list|3': [{ 'id|+1': 1, name: '@name', age: '@integer(20, 30)' }],
};

// 生成模拟数据
const data = Mock.mock(template);
console.log(data);

拦截 HTTP 请求

使用 Mock.js 和 axios-mock-adapter 拦截请求：

npm install axios axios-mock-adapter --save-dev

const axios = require('axios');
const MockAdapter = require('axios-mock-adapter');

// 创建 MockAdapter 实例
const mock = new MockAdapter(axios);

// 配置请求拦截
mock.onGet('/users').reply(200, {
  users: [{ id: 1, name: 'John' }],
});

// 发起请求
axios.get('/users').then((response) => {
  console.log(response.data); // 输出模拟数据
});

2.4 使用 Sinon.js 进行函数和对象 Mock

安装

npm install --save-dev sinon

使用示例

const sinon = require('sinon');

const myObj = {
  sayHello: () => 'Hello',
};

// Stub 函数
const stub = sinon.stub(myObj, 'sayHello').returns('Mocked Hello');
console.log(myObj.sayHello()); // Mocked Hello
stub.restore(); // 恢复原始方法

2.5 使用 MSW（Mock Service Worker）拦截 HTTP 请求

安装

npm install msw --save-dev

使用示例

// mock.js
import { setupWorker, rest } from 'msw';

// 定义请求拦截
const worker = setupWorker(
  rest.get('/api/user', (req, res, ctx) => {
    return res(ctx.json({ id: 1, name: 'Mock User' }));
  })
);

// 启动拦截器
worker.start();

// main.js
import './mock';
fetch('/api/user')
  .then((res) => res.json())
  .then((data) => console.log(data)); // 输出 { id: 1, name: 'Mock User' }

三、Mock 的核心内容与思想

3.1 Mock 的核心内容

隔离测试：
- Mock 工具的本质是为测试提供隔离的环境，将外部依赖和测试逻辑分开，保证测试的稳定性。
行为监控：
- Mock 函数和对象可以捕获调用次数、参数等信息，用于验证依赖是否按预期调用。
灵活性：
- Mock 数据、模块、函数和网络请求的能力，适应不同测试场景。
自动化：
- 提供自动生成数据或行为的能力，减少手工准备测试数据的工作量。

3.2 Mock 的核心思想

Mock 的核心思想是分离真实依赖与被测试对象，通过控制和模拟依赖的行为，使测试更高效、可靠。

控制依赖：
- 不需要真实服务就可以验证功能，避免环境问题导致测试不稳定。
覆盖极端场景：
- 模拟各种异常（超时、错误）或边界情况。
提升开发效率：
- 在服务端未就绪的情况下，前端仍可继续开发和测试。
测试驱动开发（TDD）支持：
- 在 Mock 的帮助下，开发者可以先编写测试，再实现功能。

四、总结

Mock 工具在现代开发中扮演着重要角色，贯穿了开发阶段（如模拟后端接口）和测试阶段（如验证函数调用）。从单纯的数据 Mock 到高级的网络请求拦截，每种 Mock 工具有其适用场景。

Jest：内置 Mock，适合单元测试。
Mock.js：数据 Mock 工具，生成模拟数据。
Sinon.js：强大的函数、对象 Mock。
MSW：优雅的 HTTP 请求拦截。

Mock 的核心思想是提供一个隔离的、可控的测试环境，使开发和测试更高效、更可靠。选择合适的 Mock 工具，结合实际场景，可以显著提升项目开发体验和代码质量。

Mock 与 Jest 关系详解

Jest 是一个强大的 JavaScript 测试框架，它内置了 Mock 功能，可以轻松实现函数、模块和依赖的模拟，是前端开发和测试中最流行的工具之一。

Mock 是 Jest 的重要组成部分，它是为了支持隔离测试、捕获依赖行为和模拟外部环境而设计的。下面从 Mock 的基本概念到在 Jest 中的实现和最佳实践进行详细阐述。

一、Mock 的基本概念

Mock 的核心目标：隔离被测代码，模拟真实环境中的依赖或外部接口，确保测试的独立性和可控性。

Mock 在测试中的作用：

隔离测试环境：避免外部服务（如 API）或模块对测试的干扰。
灵活测试场景：模拟不同的依赖行为（如成功、失败、超时）。
行为验证：捕获依赖的调用次数、参数等信息。
性能优化：减少对真实资源的消耗，提高测试速度。

二、Jest 的 Mock 功能概述

Jest 提供了内置的 Mock 功能，支持多种场景的模拟：

函数 Mock：
- 模拟函数的返回值。
- 验证函数的调用行为（如参数和调用次数）。
模块 Mock：
- 替换整个模块或依赖。
自动 Mock：
- 自动生成 Mock 模块，无需手动实现。
手动 Mock：
- 在 __mocks__ 目录下创建自定义 Mock 模块。
Spy（间谍）：
- 监视原始实现，同时记录调用信息。

三、Jest Mock 的使用详解

3.1 Mock 函数

Jest 提供了 jest.fn() 和 jest.spyOn() 方法，用于创建 Mock 函数或监视已有函数。

基本用法

const mockFn = jest.fn();

// 设置返回值
mockFn.mockReturnValue('mocked value');
console.log(mockFn()); // 输出：mocked value

// 检查调用情况
mockFn('arg1', 'arg2');
expect(mockFn).toHaveBeenCalledWith('arg1', 'arg2');
expect(mockFn).toHaveBeenCalledTimes(1);

模拟异步函数

const asyncMock = jest.fn().mockResolvedValue('async mocked value');
asyncMock().then((result) => console.log(result)); // 输出：async mocked value

3.2 Mock 模块

Jest 的 jest.mock() 方法可以替换模块的实现，支持自动和手动 Mock。

自动 Mock

// 自动 Mock 模块
jest.mock('./api'); // 假设 api 模块中有 fetchData 函数
const { fetchData } = require('./api');

test('mock module example', async () => {
  fetchData.mockResolvedValue('mocked data'); // 模拟返回值
  const result = await fetchData();
  expect(result).toBe('mocked data');
  expect(fetchData).toHaveBeenCalled();
});

手动 Mock

在 __mocks__ 目录下创建 Mock 实现：

// __mocks__/api.js
module.exports = {
  fetchData: jest.fn(() => Promise.resolve('manual mocked data')),
};

然后在测试中使用：

jest.mock('./api'); // Jest 会自动加载 __mocks__/api.js
const { fetchData } = require('./api');

test('manual mock example', async () => {
  const result = await fetchData();
  expect(result).toBe('manual mocked data');
});

3.3 Mock 定时器

Jest 提供了 jest.useFakeTimers() 和 jest.runAllTimers() 来 Mock 定时器。

使用示例

jest.useFakeTimers();

test('mock timers example', () => {
  const mockFn = jest.fn();
  setTimeout(mockFn, 1000);

  jest.runAllTimers(); // 快进所有计时器
  expect(mockFn).toHaveBeenCalled();
});

3.4 Spy（间谍）

Spy 是一种特殊的 Mock，它允许保留原始实现，同时监视函数调用。

使用示例

const obj = {
  method: (x) => x * 2,
};

jest.spyOn(obj, 'method'); // 监视方法
obj.method(5);

expect(obj.method).toHaveBeenCalledWith(5);
expect(obj.method).toHaveBeenCalledTimes(1);

四、Mock 与 Jest 的核心思想

测试隔离：
- Mock 的目标是实现测试的“单一性”，即测试只关注被测代码的功能，而无需依赖外部环境。
行为驱动：
- Mock 功能不仅可以模拟返回值，还可以记录函数的调用信息（如参数和调用次数），以验证依赖行为是否正确。
灵活性与扩展性：
- Jest 的 Mock 功能不仅适用于简单的函数，还支持模块、类、定时器等复杂对象的 Mock，满足多种场景的需求。
提高效率：
- 通过 Mock，测试可以独立于网络、数据库等外部资源运行，从而显著提高速度和稳定性。
兼容 TDD/BDD 流程：
- 在 Jest 中使用 Mock 功能，可以先编写测试，再实现功能，完美支持测试驱动开发（TDD）或行为驱动开发（BDD）。

五、Jest Mock 与其他 Mock 工具对比

特性	Jest Mock	Sinon.js	Mock.js
功能范围	内置函数、模块、定时器 Mock	函数、对象、时间 Mock	数据 Mock
易用性	易用，零配置	较复杂，需手动配置	简单，专注数据
适用场景	单元测试、集成测试	单元测试	数据生成
集成度	与 Jest 完美集成	独立使用	独立使用

六、总结

Mock 和 Jest 的关系：

Jest 是测试框架，而 Mock 是其核心功能之一。
Jest 的 Mock 功能覆盖了函数、模块和外部依赖，帮助开发者轻松隔离测试环境。
Mock 功能在 Jest 中不需要额外配置，开箱即用。

Jest Mock 的适用场景：

模拟函数行为和返回值。
替换外部模块（如 API 请求）。
测试异步函数。
模拟复杂的依赖场景。

通过充分利用 Jest Mock 的功能，可以提高测试的灵活性、可靠性和效率，使前端开发和测试更高效、更专业。

原文地址：https://blog.csdn.net/m0_55049655/article/details/143934169

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：springboot基于微信小程序的食堂预约点餐系统
下一篇：优维HAO案例：500强旗下全牌照综合性券商CMDB平台项目

Windows电脑本地部署llamafile并接入Qwen大语言模型远程AI对话实战
Windows电脑本地部署llamafile并接入Qwen大语言模型远程AI对话实战
阅读更多2024-11-23
解决vm虚拟机中ctrl键粘滞问题（一直处于按下状态）
虚拟机中点击鼠标左键没有问题，单独按下键盘也没有问题，但是如果按下键盘的同时在按下鼠标左键就会卡住。而且100%稳定复现。发现问题原因：vm版本的问题，我的版本是17.5.0，升级成17.5.2 bu
阅读更多2024-11-23
第十章 JavaScript的应用
10.1.1 JavaScript简介1 简单性JavaScript 设计之初就考虑到了非专业程序员的使用，因此它的语法相对简单，容易上手。2 动态性JavaScript 是一种解释型语言，代码可以在
阅读更多2024-11-23
非root用户安装CUDA
4.下载完成后执行.run文件，需要添加两个参数，一个是--override，用于跳过某些检查或限制；另一个是--toolkitpath，它表示安装路径，必须是自己目录下面的路径，如果是根目录就会安装
阅读更多2024-11-23
Python操作neo4j库py2neo使用之py2neo 删除及事务相关操作（三）
【代码】## Python操作neo4j库py2neo使用之py2neo 删除及事务相关操作（三）
阅读更多2024-11-23
【通俗理解】Jensen不等式与变分分布q(z)在积分计算中的应用
Jensen不等式 #变分分布 #积分计算 #期望 #凸函数 #优化问题 #下界估计 #机器学习。
阅读更多2024-11-23
「Mac玩转仓颉内测版27」基础篇7 - 字符串类型详解
本篇将介绍 Cangjie 中的字符串类型，包括字符串的定义、字面量形式、插值表达、常用操作及应用场景，帮助开发者熟练掌握字符串的使用。
阅读更多2024-11-23
数据科学与SQL：组距分组分析 | 区间分布问题
绝对值分布分析也可以理解为组距分组分析。对于某个指标而言，一个记录对应的指标值的绝对值，肯定落在所有指标值的绝对值的最小值和最大值构成的区间内，根据一定的算法，在把这个区间划分为等距离的几个小区间，，
阅读更多2024-11-23
c++编译报C1004错误的原因及解决办法
可能是你的代码文件最后没有正确的结束符，或者是缺少了一些必要的头文件或语句。默认磁盘驱动器没有足够的空间用于临时文件，需要大约两倍于源文件的空间。编译器到达了源文件尾但未解析构造。计算结果为假的 #i
阅读更多2024-11-23
mysql 去重补全取出重复变量函数和存储过程
mysql 去重补全取出重复变量函数和存储过程
阅读更多2024-11-23

前端测试工具（Jest与Mock）

Jest 工具详解：从安装到使用**

一、Jest 的安装

1.1 环境准备

1.2 安装 Jest

1.3 验证安装

二、基本使用

2.1 创建测试文件

2.2 编写第一个测试

三、Jest 的核心功能

3.1 匹配器（Matchers）

3.2 Mock（模拟函数）

3.2.1 模拟函数

3.2.2 模拟模块

3.3 测试异步代码

3.4 快照测试（Snapshot Testing）

四、Jest 的核心内容与思想

4.1 核心思想

4.2 核心特性

4.3 与其他测试框架的对比

总结

Mock 工具详解：从安装到使用

1.1 什么是 Mock？

1.2 Mock 的类型

二、Mock 工具的安装与使用

2.1 常见 Mock 工具介绍

2.2 使用 Jest 进行 Mock

安装

Mock 函数

Mock 模块

2.3 使用 Mock.js 进行数据模拟

安装

基本使用

拦截 HTTP 请求

2.4 使用 Sinon.js 进行函数和对象 Mock

安装

使用示例

2.5 使用 MSW（Mock Service Worker）拦截 HTTP 请求

安装

使用示例

三、Mock 的核心内容与思想

3.1 Mock 的核心内容

3.2 Mock 的核心思想

四、总结

Mock 与 Jest 关系详解

一、Mock 的基本概念

Mock 在测试中的作用：

二、Jest 的 Mock 功能概述

三、Jest Mock 的使用详解

3.1 Mock 函数

基本用法

模拟异步函数

3.2 Mock 模块

自动 Mock

手动 Mock

3.3 Mock 定时器

使用示例

3.4 Spy（间谍）

使用示例

四、Mock 与 Jest 的核心思想

五、Jest Mock 与其他 Mock 工具对比

六、总结

相关文章