Vitest快照测试终极指南：智能匹配与可视化对比技巧

Vitest快照测试终极指南：智能匹配与可视化对比技巧

【免费下载链接】vitestNext generation testing framework powered by Vite.项目地址: https://gitcode.com/GitHub_Trending/vi/vitest

Vitest是一款由Vite驱动的下一代测试框架，它提供了强大的快照测试功能，帮助开发者轻松捕获和验证应用程序的UI状态、数据结构和DOM元素。本指南将深入探讨Vitest快照测试的核心功能，包括智能匹配技术、可视化对比工具以及实用的自定义技巧，让你快速掌握这一强大测试工具。

什么是快照测试？

快照测试是一种捕获应用程序输出并将其与先前存储的"快照"进行比较的测试方法。当使用快照测试时，Vitest会为给定值创建一个快照，然后将其与存储在测试旁边的参考快照文件进行比较。如果两个快照不匹配，测试将失败：要么是意外的更改，要么是参考快照需要更新到新版本的结果。

快照工件应该与代码更改一起提交，并作为代码审查过程的一部分进行审查。在后续的测试运行中，Vitest会将渲染的输出与先前的快照进行比较。如果它们匹配，测试将通过。如果不匹配，要么是测试运行器在代码中发现了应该修复的错误，要么是实现已经更改，需要更新快照。

三种快照匹配器的使用场景

Vitest提供了三种主要的快照匹配器，每种都有其特定的使用场景：

1. toMatchSnapshot()：外部文件快照

toMatchSnapshot()是最常用的快照匹配器，它将快照存储在单独的.snap文件中。这种方式适合较大的输出或需要跨多个测试共享的快照。

使用示例：

test('生成正确的欢迎消息', () => { expect(generateGreeting('Alice')).toMatchSnapshot() })

首次运行此测试时，Vitest会创建一个如下所示的快照文件：

// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports['生成正确的欢迎消息 1'] = '"Hello, Alice!"'

2. toMatchInlineSnapshot()：内联快照

toMatchInlineSnapshot()将快照直接存储在测试文件中，而不是创建单独的.snap文件。这种方式适合较小的输出，使测试和预期结果在同一个文件中，提高可读性。

使用示例：

test('生成正确的欢迎消息', () => { expect(generateGreeting('Alice')).toMatchInlineSnapshot() })

运行测试后，Vitest会自动更新测试文件，将快照内联到测试中：

test('生成正确的欢迎消息', () => { expect(generateGreeting('Alice')).toMatchInlineSnapshot(`"Hello, Alice!"`) })

与外部快照不同，内联快照不会创建单独的.snap文件。预期值直接存储在测试文件中作为toMatchInlineSnapshot()的参数，因此没有额外的文件需要提交。

3. toMatchFileSnapshot()：文件快照

toMatchFileSnapshot()允许你将快照保存到具有任何扩展名的文件中，这对于需要语法高亮显示的快照内容特别有用，如HTML、JSON或Markdown。

使用示例：

test('生成正确的HTML结构', async () => { const html = renderComponent() await expect(html).toMatchFileSnapshot('./fixtures/component.html') })

文件快照匹配器必须是async的——toMatchFileSnapshot返回一个Promise。记得在匹配器和测试中使用await来获取结果。

如何更新快照

当接收到的值与快照不匹配时，测试将失败并显示它们之间的差异。当快照更改是预期的时，你可能希望从当前状态更新快照。

在监视模式下，你可以在终端中按u键直接更新失败的快照。或者，你可以在CLI中使用--update或-u标志让Vitest更新快照：

vitest --update # 或 vitest -u

默认情况下，Vitest不会在CI环境中写入快照（process.env.CI为真值），任何快照不匹配、缺少快照和过时的快照都会导致运行失败。

处理动态内容：属性匹配器

如果你的输出包含每次运行都会更改的值（如时间戳或ID），可以使用属性匹配器来固定结构，同时忽略易变字段。将带有不对称匹配器的对象作为第一个参数传递给toMatchSnapshot()或toMatchInlineSnapshot()：

test('用户对象结构正确', () => { const user = { id: '12345', // 动态生成的ID name: 'John Doe', createdAt: new Date().toISOString() // 动态时间戳 } expect(user).toMatchSnapshot({ id: expect.any(String), createdAt: expect.any(String) }) })

这将确保即使id和createdAt的值发生变化，只要它们是字符串类型，测试就会通过。

自定义快照序列化

Vitest使用@vitest/pretty-format来渲染快照。你可以通过配置snapshotFormat来自定义快照的格式，或通过实现自定义序列化器来扩展快照功能。

配置snapshotFormat

在Vitest配置中，你可以设置snapshotFormat选项来调整快照的格式：

// vitest.config.js export default defineConfig({ test: { snapshotFormat: { printBasicPrototype: false, // 不打印基本原型信息 escapeString: true, // 转义字符串 lineLength: 80 // 行长度限制 } } })

Vitest在应用你的snapshotFormat覆盖之前已经应用了这些默认值，还支持诸如printShadowRoot和maxOutputLength等格式化器选项。

添加自定义序列化器

你可以使用expect.addSnapshotSerializerAPI显式添加自定义序列化器，或在配置中使用snapshotSerializers选项隐式添加：

// vitest.config.js export default defineConfig({ test: { snapshotSerializers: ['path/to/custom-serializer.ts'] } })

自定义序列化器允许你控制如何将特定类型的值转换为快照字符串，这对于复杂对象或特定领域的数据类型特别有用。

可视化对比与调试

Vitest提供了直观的用户界面，帮助你可视化地比较快照差异并进行调试。

Vitest快照测试界面（深色模式）展示了测试结果和失败的快照对比

Vitest快照测试界面（浅色模式）提供了清晰的快照差异可视化

当快照不匹配时，Vitest会显示详细的差异，帮助你快速识别变化。你可以在界面中直接查看预期值和实际值的对比，并决定是否更新快照。

高级技巧：ARIA快照

ARIA快照捕获DOM元素的可访问性树，并将其与存储的模板进行比较。基于Playwright的ARIA快照，它们提供了视觉回归测试的语义替代方案——断言结构和含义而非像素。

Vitest ARIA快照测试示例展示了如何捕获和比较DOM元素的可访问性树

ARIA快照特别适用于确保UI组件对屏幕阅读器用户保持可访问性，即使视觉设计发生变化。你可以使用toMatchAriaSnapshot和toMatchAriaInlineSnapshot来创建ARIA快照：

test('按钮具有正确的ARIA属性', async () => { const button = renderButton() await expect(button).toMatchAriaSnapshot() })

总结

Vitest快照测试是一个强大的工具，可以帮助你捕获和验证应用程序的各种输出。通过本文介绍的智能匹配技术、可视化对比工具和自定义技巧，你可以轻松地将快照测试集成到你的开发流程中，提高代码质量并减少回归错误。

无论是简单的数据结构、复杂的HTML输出，还是关键的可访问性信息，Vitest的快照功能都能为你提供可靠的测试保障。开始使用这些技巧，体验Vitest快照测试带来的效率提升吧！

要了解更多关于Vitest快照测试的信息，请查阅官方文档：docs/guide/snapshot.md。

【免费下载链接】vitestNext generation testing framework powered by Vite.项目地址: https://gitcode.com/GitHub_Trending/vi/vitest