【实战】二、Jest难点进阶（一） —— 前端要学的测试课 从Jest入门到TDD BDD双实战（五）

文章目录

• • 一、Jest 前端自动化测试框架基础入门
  • 二、Jest难点进阶
  • • 1.snapshot 快照测试

学习内容来源：Jest入门到TDD/BDD双实战_前端要学的测试课

相对原教程，我在学习开始时（2023.08）采用的是当前最新版本：

具体配置、操作和内容会有差异，“坑”也会有所不同。。。

一、Jest 前端自动化测试框架基础入门

• 一、Jest 前端自动化测试框架基础入门（一）

---

• 一、Jest 前端自动化测试框架基础入门（二）

---

• 一、Jest 前端自动化测试框架基础入门（三）

---

• 一、Jest 前端自动化测试框架基础入门（四）

二、Jest难点进阶

1.snapshot 快照测试

新建 lesson9.js

export const generateConfig = () => {return {server: 'http://localhost',port: 8080}}

新建 lesson9.test.js

import { generateConfig } from "./lesson9";test('测试 generateConfig', async () => {expect(generateConfig()).toEqual({server: 'http://localhost',port: 8080})})

对于这种配置文件最简单的测试思路就是如上面这样写，但是这样的话每次配置文件有改动都需要相应修改测试案例，并不友好，因此快照功能应运而生！！！

修改 lesson9.test.js

test('测试 generateConfig', async () => {expect(generateConfig()).toMatchSnapshot();})

运行，日志如下：

 PASS./lesson9.test.js√ 测试 generateConfig (6ms) › 1 snapshot written.Snapshot Summary › 1 snapshot written from 1 test suite.Test Suites: 1 passed, 1 totalTests: 1 passed, 1 totalSnapshots: 1 written, 1 totalTime:3.697s

toMatchSnapshot: 匹配快照，首次执行会在 测试案例文件所在目录下生成一个 __snapshots__ 目录，目录下有个文件 lesson9.test.js.snap：

// Jest Snapshot v1, https://goo.gl/fbAQLPexports[`测试 generateConfig 1`] = `Object {"port": 8080,"server": "http://localhost",}`;

若是下次测试生成快找文件与之前不同，则测试不会通过，试一下：

修改 lesson9.js

export const generateConfig = () => {return {server: 'http://localhost',port: 8080,alisa: {}}}

运行测试用例，日志如下：

FAILsrc/lesson9/__tests__/lesson9.test.js× 测试 generateConfig (10ms)● 测试 generateConfigexpect(received).toMatchSnapshot()Snapshot name: `测试 generateConfig 1`- Snapshot+ ReceivedObject {+ "alisa": Object {},"port": 8080,"server": "http://localhost",}2 |3 | test('测试 generateConfig', async () => {> 4 | expect(generateConfig()).toMatchSnapshot();|^5 | })at Object.<anonymous> (src/lesson9/__tests__/lesson9.test.js:4:28) › 1 snapshot failed.Snapshot Summary › 1 snapshot failed from 1 test suite. Inspect your code changes or re-run jest with `-u` to update them.Test Suites: 1 failed, 1 totalTests: 1 failed, 1 totalSnapshots: 1 failed, 1 totalTime:4.32s

失败，快照不匹配，若是确定要修改，且在命令行模式，可以输入 u 更新快照，若是一个文件中只能有一个包含多个快照 需要输入 i 进行交互式的一个个对比更新。最后回车返回即可。

不过这样的配置文件都是写死的，若是配置文件内容是动态变化的比如：

修改 lesson9.js

export const generateConfig = () => {return {server: 'http://localhost',port: 8080,time: new Date()}}

这样的话每次生成的快照一定是不一样的，也就通不过测试了

修改 lesson9.test.js

test('测试 generateConfig', async () => {expect(generateConfig()).toMatchSnapshot({time: expect.any(Date)});})

这样的话 time 只会对比类型，不会对比值，测试就可以通过啦

安装 prettier

npm i prettier@1.18.2 -S

修改 lesson9.test.js(toMatchSnapshot 改为 toMatchInlineSnapshot)

test("测试 generateConfig", async () => {expect(generateConfig()).toMatchInlineSnapshot({time: expect.any(Date)});});

运行测试用例，日志如下：

PASSsrc/lesson9/__tests__/lesson9.test.js√ 测试 generateConfig (27ms) › 1 snapshot written. › 1 snapshot obsolete. • 测试 generateConfig 1Snapshot Summary › 1 snapshot written from 1 test suite. › 1 snapshot obsolete from 1 test suite. To remove it, re-run jest with `-u`. ↳ src/lesson9/__tests__/lesson9.test.js • 测试 generateConfig 1Test Suites: 1 passed, 1 totalTests: 1 passed, 1 totalSnapshots: 1 obsolete, 1 written, 1 totalTime:4.151s

运行过后 lesson9.test.js 变了样子：

test("测试 generateConfig", async () => {expect(generateConfig()).toMatchInlineSnapshot({time: expect.any(Date)},`Object {"port": 8080,"server": "http://localhost","time": Any,}`);});

可以看到快照作为第二个参数被保存到了测试案例里。

本文仅作记录， 实战要点待后续专文总结，敬请期待。。。