无法在Vitest单元测试中挂载TipTap内容

Question

我有一个包含TipTap编辑器的vue组件，我在测试它时遇到了问题。我正在使用Vitest和vue-test-utils。

这是我的组成部分：

<script setup lang="ts">
import { useEditor, EditorContent } from "@tiptap/vue-3";
import StarterKit from "@tiptap/starter-kit";

const props = defineProps({
  text: {
    type: String,
    default: "",
  },
});

const editor = useEditor({
  content: props.text,
  extensions: [StarterKit],
});
</script>
<template>
  <editor-content class="entry-text" :editor="editor" />
</template>

我的测试：

it("displays content", () => {
    const wrapper = mount(EntryEditor, {
      propsData: { text: "Testing" },
    });
    console.log(wrapper.vm.text); // output: Testing
    console.log(wrapper.element.outerHTML); // output: <div class="entry-text"></div>
  });

在浏览器中，一切都很好，但是在单元测试中，我无法获得tiptap编辑器的内容来呈现。

我还在vue/test-库的render函数中尝试了这一点，得到了相同的结果(正如我所理解的，它使用的是引擎盖下的vue-test-utils )，这并不令人惊讶。

这里发生了什么事？?

Answer 1

您需要使您的测试异步并刷新任何未解决的承诺：

import { flushPromises, mount } from "@vue/test-utils";

it("displays content", async () => {  // Make the test asynchronous
  const wrapper = mount(EntryEditor, {
    propsData: { text: "Testing" },
  });
    
  expect(wrapper.element.innerHTML).toBe("")

  await flushPromises()

  expect(wrapper.element.innerHTML).toBe(
    '<div contenteditable="true" translate="no" class="ProseMirror" tabindex="0">' + 
      '<p>Testing</p>' + 
    '</div>'
  )
});