Jest 的快照测试是一种用于验证组件输出的有效方法，特别适用于 UI 组件。快照测试通过将组件的输出保存为快照文件，并在后续测试中将当前输出与快照进行比较。如果输出发生变化，测试将失败，从而提醒开发者检查这些变化是否是预期的。
理解快照测试
创建快照：在第一次运行快照测试时，Jest 会生成一个快照文件，保存组件的输出。
比较快照：在后续测试中，Jest 会将组件的当前输出与快照文件进行比较。如果输出不同，测试将失败。
更新快照：如果组件的输出发生了预期的变化，可以更新快照文件，使其反映最新的输出。
使用快照测试
以下是一个使用 Jest 和 Vue Test Utils 对 Vue 组件进行快照测试的示例：
1. 安装依赖
确保你已经安装了 Vue Test Utils 和 Jest：
npm install @vue/test-utils jest
2. 创建 Vue 组件
假设你有一个 Vue 组件 MyComponent.vue：
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, World!'
}
}
}
</script>3. 创建测试文件
在 tests 目录下创建一个测试文件，例如 MyComponent.spec.js：
import { shallowMount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'
describe('MyComponent.vue', () => {
it('renders correctly', () => {
const wrapper = shallowMount(MyComponent)
expect(wrapper.element).toMatchSnapshot()
})
})4. 运行测试
在终端中运行测试命令：
npm run test
解释
挂载组件：使用
shallowMount挂载MyComponent组件。生成快照：使用
expect(wrapper.element).toMatchSnapshot()生成组件的快照，并将其保存到快照文件中。比较快照：在后续测试中，Jest 会将组件的当前输出与快照文件进行比较。如果输出不同，测试将失败。
更新快照
如果组件的输出发生了预期的变化，可以使用以下命令更新快照文件：
npm run test -- -u
在 Jest 中，如果组件的输出发生了预期的变化，你可以更新快照文件以反映最新的输出。更新快照文件的方法如下：
使用命令行更新快照
运行测试并更新快照： 在终端中运行以下命令来更新快照文件：
npm run test -- -u或者，如果你直接使用
jest命令：jest --updateSnapshot这将重新运行所有测试，并更新快照文件。
在交互模式中更新快照
如果在交互模式下运行 Jest（例如使用 jest --watch），当快照测试失败时，Jest 会提示你是否要更新快照。你可以按 u 键来更新快照。
快照测试是一种有效的测试方法，可以帮助捕获组件输出的意外变化，提高测试覆盖率和代码质量。通过上述步骤，可以轻松地为组件编写快照测试，并享受快照测试带来的各种好处。
组件用了快照测试还需要普通测试吗
快照测试和普通测试（单元测试）各有其独特的优势和用途，通常情况下，两者是互补的。以下是一些考虑因素，帮助你决定是否需要在使用快照测试的同时编写普通测试：
快照测试的优势
快速捕获 UI 变化：快照测试可以快速捕获组件输出的变化，特别适用于 UI 组件。
简化测试编写：快照测试自动生成快照文件，减少了手动编写测试代码的工作量。
文档化组件：快照文件可以作为组件的文档，记录组件在不同状态下的输出。
快照测试的局限性
无法测试逻辑：快照测试主要用于验证组件的输出，无法测试组件内部的逻辑和行为。
容易忽略细节：如果快照文件过大，开发者可能会忽略细微的变化，导致潜在问题未被发现。
普通测试的优势
测试逻辑和行为：普通测试可以深入测试组件的逻辑和行为，确保功能正确。
精确断言：普通测试可以编写精确的断言，验证特定的输出和状态。
覆盖更多场景：普通测试可以覆盖更多的使用场景和边界情况。
综合使用
为了确保组件的高质量和可靠性，建议综合使用快照测试和普通测试：
快照测试：用于验证组件的输出，捕获 UI 变化。
普通测试：用于测试组件的逻辑和行为，编写精确的断言。
示例
假设你有一个 Vue 组件 MyComponent.vue，你可以同时编写快照测试和普通测试：
快照测试
import { shallowMount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'
describe('MyComponent.vue', () => {
it('renders correctly', () => {
const wrapper = shallowMount(MyComponent)
expect(wrapper.element).toMatchSnapshot()
})
})普通测试
import { shallowMount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'
describe('MyComponent.vue', () => {
it('renders message correctly', () => {
const wrapper = shallowMount(MyComponent)
expect(wrapper.text()).toContain('Hello, World!')
})
it('handles click event correctly', async () => {
const wrapper = shallowMount(MyComponent)
await wrapper.find('button').trigger('click')
expect(wrapper.vm.clicked).toBe(true)
})
})通过综合使用快照测试和普通测试，你可以全面验证组件的输出、逻辑和行为，确保组件的高质量和可靠性。
总结
使用快照测试来测试UI输出，不同状态下，捕获组件不同的快照
快照能发现界面上的变化，但无法触及组件内逻辑的测试且容易忽略细节
组件内的逻辑测试应该使用普通的单元测试来深入测试组件的逻辑和行为，确保功能正确
整洁架构中，业务逻辑(核心层)应该与UI层解藕，UI层只负责渲染，可以让组件的测试更方便
在开发中建议将与UI无关的逻辑抽离和测试，让UI成为薄薄的一层，测试和扩展更容易！