在进行快照测试时，通常会在组件的初始渲染和某些交互（如点击事件）之后分别进行快照。这可以帮助你捕获组件在不同状态下的输出，并确保这些状态变化是预期的。
以下是一个示例，展示了如何在点击事件发生后进行快照测试：
示例组件
假设你有一个 Vue 组件 Detail.vue，其中包含一个点击事件：
<template>
<div>
<el-card>
<div @click="handleClick">
<p>{{ message }}</p>
</div>
</el-card>
<el-drawer title="执行日志" :visible.sync="drawer" direction="rtl" size="60%" destory-on-close>
<m-log :instance-id="instanceId" :subtask-id="subtaskId" />
</el-drawer>
</div>
</template>
<script>
import MLog from './log.vue'
export default {
name: 'Detail',
components: {
'm-log': MLog
},
data() {
return {
message: 'Hello, World!',
drawer: false,
instanceId: '123',
subtaskId: '456'
}
},
methods: {
handleClick() {
this.drawer = !this.drawer
}
}
}
</script>快照测试
在测试文件 Detail.spec.js 中，你可以编写如下测试代码：
import { shallowMount } from '@vue/test-utils'
import Detail from '@/components/Detail.vue'
describe('Detail.vue', () => {
it('renders correctly before and after click', async () => {
const wrapper = shallowMount(Detail)
// 初始渲染的快照
expect(wrapper.element).toMatchSnapshot()
// 模拟点击事件
await wrapper.find('div').trigger('click')
// 点击事件后的快照
expect(wrapper.element).toMatchSnapshot()
})
})解释
初始渲染的快照：在组件初始渲染后，使用
expect(wrapper.element).toMatchSnapshot()生成并保存快照。模拟点击事件：使用
await wrapper.find('div').trigger('click')模拟点击事件。点击事件后的快照：在点击事件发生后，再次使用
expect(wrapper.element).toMatchSnapshot()生成并保存快照。
通过这种方式，你可以捕获组件在不同状态下的输出，并确保这些状态变化是预期的。这样可以提高测试的覆盖率和可靠性。