一、快照测试在 CI 中的困扰
在软件开发里，持续集成（CI）是个特别重要的环节，它能让我们快速发现代码里的问题。快照测试在其中很常用，像 Jest、Vitest 这类测试框架都支持，它主要是把测试结果保存成快照文件，之后每次测试的时候就和这个快照比对，如果不一样就说明代码可能有了问题。
但在实际操作中，快照测试在 CI 环境里频繁失效是经常遇到的情况。一旦失效，就会干扰我们对代码问题的判断，浪费很多时间去排查明明没问题的“问题”。比如说一个前端项目，在本地运行测试的时候一切正常，可到了 CI 环境里，快照测试却总是不通过，这时候就会让人很郁闷，不知道是哪里出了错。
二、Vitest 快照更新策略
2.1 理解 Vitest 快照机制
Vitest 是个轻量级、速度快的测试框架，它利用快照测试能高效地验证组件或者函数的输出。当我们首次运行测试的时候，Vitest 会把测试结果保存成快照文件，默认存放在 __snapshots__ 文件夹下。下面是一个简单的示例：
// 这是一个简单的函数，返回字符串
function greet(name) {
return `Hello, ${name}!`;
}
// 这是使用 Vitest 进行快照测试的代码
import { describe, it, expect } from 'vitest';
describe('greet 函数测试', () => {
it('应该返回正确的问候语', () => {
const result = greet('John');
expect(result).toMatchSnapshot();
});
});
在首次执行这个测试时，Vitest 会生成一个快照文件，内容大概是这样：
// greet 函数测试
// 快照文件内容
exports['greet 函数测试 应该返回正确的问候语 1'] = `"Hello, John!"`;
之后每次运行测试，Vitest 就会把 greet('John') 的结果和这个快照文件里的内容进行对比。
2.2 手动更新快照
要是代码有了合理的改动，导致快照测试不通过，我们就需要手动更新快照。在 Vitest 里，可以通过命令行参数来实现。比如：
# 运行测试并更新所有不通过的快照
npx vitest --update-snapshot
或者使用简写：
# 简写形式更新快照
npx vitest -u
比如我们把 greet 函数改成这样：
function greet(name) {
return `Hi, ${name}!`;
}
再次运行测试，肯定会失败，这时候就可以用上面的命令更新快照，更新之后的快照文件内容会变成：
// greet 函数测试
// 快照文件内容
exports['greet 函数测试 应该返回正确的问候语 1'] = `"Hi, John!"`;
2.3 自动更新快照策略
在 CI 环境里，我们可以设置自动更新快照的策略。比如可以在 CI 脚本里，先尝试正常运行测试，如果不通过，再尝试更新快照并重新运行测试。以下是一个简单的示例：
#!/bin/bash
# 先正常运行测试
npx vitest
if [ $? -ne 0 ]; then
# 如果测试失败，更新快照并重新运行
npx vitest -u
npx vitest
fi
这样就能在一定程度上解决因为代码正常改动导致的快照测试频繁失效问题。
三、跨平台换行符问题
3.1 换行符差异
不同的操作系统对换行符的处理是不一样的。Windows 用的是 \r\n（回车换行），Unix 和 Linux 用的是 \n（换行），Mac OS 老版本用的是 \r（回车），不过现在的新版本和 Unix 一样用 \n。这种差异在快照测试里会引发大问题。
比如说有一个函数返回多行文本：
function getMultiLineText() {
return `Line 1
Line 2
Line 3`;
}
import { describe, it, expect } from 'vitest';
describe('getMultiLineText 函数测试', () => {
it('应该返回多行文本', () => {
const result = getMultiLineText();
expect(result).toMatchSnapshot();
});
});
在 Windows 系统上生成的快照文件里，换行符是 \r\n，而在 Unix 系统上是 \n。这样在不同系统之间切换或者在 CI 环境里运行测试时，就会因为换行符的差异导致快照测试失败。
3.2 解决方案
3.2.1 统一换行符
可以在代码里统一换行符。比如在生成文本的时候，把所有换行符都换成 \n：
function getMultiLineText() {
return `Line 1\nLine 2\nLine 3`;
}
3.2.2 在测试中处理换行符差异
在测试代码里，可以使用正则表达式把换行符统一处理。示例如下：
import { describe, it, expect } from 'vitest';
function getMultiLineText() {
return `Line 1
Line 2
Line 3`;
}
describe('getMultiLineText 函数测试', () => {
it('应该返回多行文本', () => {
const result = getMultiLineText();
// 把所有换行符统一替换成 \n
const normalizedResult = result.replace(/\r\n/g, '\n');
expect(normalizedResult).toMatchSnapshot();
});
});
这样不管在哪个系统上运行测试，快照测试都不容易因为换行符问题而失败了。
四、应用场景
4.1 前端组件测试
在前端开发里，组件的输出样式和结构经常会变化。使用快照测试可以快速验证组件的更新是否符合预期。比如一个 React 组件：
import React from 'react';
function MyComponent() {
return (
<div>
<h1>Hello, World!</h1>
</div>
);
}
import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/react';
describe('MyComponent 测试', () => {
it('应该正确渲染', () => {
const { container } = render(<MyComponent />);
expect(container).toMatchSnapshot();
});
});
当组件的样式或者结构有改动时，快照测试就会帮我们发现这些变化。
4.2 后端接口响应测试
后端接口返回的数据结构也需要验证。通过快照测试可以把接口的响应数据保存成快照，之后每次测试就和快照对比。比如一个 Node.js 的 Express 接口：
const express = require('express');
const app = express();
app.get('/api/data', (req, res) => {
const data = {
message: 'Hello, API!',
status: 200
};
res.json(data);
});
const request = require('supertest');
import { describe, it, expect } from 'vitest';
describe('API 接口测试', () => {
it('应该返回正确的数据', async () => {
const response = await request(app).get('/api/data');
expect(response.body).toMatchSnapshot();
});
});
这样就能保证接口的响应数据结构不会意外改变。
五、技术优缺点
5.1 优点
5.1.1 高效验证
快照测试能快速验证代码输出是否和之前一致，不用写很多复杂的断言，提高了测试效率。比如在验证一个复杂组件的渲染结果时，用快照测试只需要一行代码就能完成验证。
5.1.2 直观展示差异
当快照测试不通过时，测试框架会很直观地展示出新旧快照的差异，方便我们快速定位问题。
5.2 缺点
5.2.1 缺乏语义
快照测试只是比对结果是否一致，不会检查结果是否合理。如果快照本身有错误，后续的测试可能就会一直通过错误的快照进行验证。
5.2.2 频繁更新快照
随着代码的不断迭代，可能需要频繁更新快照，这会增加额外的工作量。
六、注意事项
6.1 定期审查快照文件
快照文件需要定期审查，确保里面保存的内容是正确的。如果有不必要或者错误的快照文件，应该及时清理。
6.2 避免在敏感数据上使用快照测试
如果测试涉及到敏感数据，比如用户密码、身份证号等，就不适合用快照测试，因为快照文件会把这些数据保存下来，存在安全风险。
6.3 与其他测试方法结合使用
快照测试不能完全替代其他类型的测试，像单元测试、集成测试等。应该把这些测试方法结合起来，保证代码的全面测试。
七、文章总结
快照测试在 CI 里频繁失效以及跨平台换行符问题是很常见的开发难题。通过了解 Vitest 的快照更新策略，我们可以有效地处理因为代码正常改动导致的快照测试失败问题，比如手动或者自动更新快照。对于跨平台换行符问题，我们可以通过统一换行符或者在测试代码里处理差异来解决。
在实际开发中，要根据不同的应用场景合理使用快照测试，同时也要清楚它的优缺点，注意一些事项，把它和其他测试方法结合起来使用，这样才能保证代码的质量，提高开发效率。
Comments