vuejs3 - vue 和 vitest，data-v-[random-number] 属性被添加到 html

Question

简介:我正在使用 vite 和 vitest，我正在对 100% 模板且不包含任何逻辑的组件进行快照测试

问题:data-v-[random-number] 它被添加到每个组件的根元素中，并且快照始终不同

我想要什么:了解为什么我会得到这个 data-v-[random-number]，如果可能的话，找到避免此问题的方法

简短示例代码:

BaseText.vue:

<script setup lang="ts"></script>
<template>
    <span><slot></slot></span>
</template>

BaseText.spec.ts:

import { describe, it, expect } from "vitest";
import { shallowMount } from "@vue/test-utils";
import BaseText from "./BaseText.vue";

describe(name, () => {
    const wrapper = shallowMount(BaseText);
    it("MatchSnapshot", () => {
        expect(wrapper.html()).toMatchSnapshot();
    });
});

运行测试时出错:

 - Expected   ""<span data-v-25e5131c=""></span>""
  + Received   ""<span data-v-b3462088=""></span>""

Answer 1

您可以使用此库删除data-v 属性(自动执行)。它还涵盖了在 Vue 中使用快照测试时需要的许多其他常见内容。

• https://github.com/tjw-lint/jest-serializer-vue-tjw/#using-with-vitest

尽管名称中有 jest，但这也适用于 Vitest。