Не удается смонтировать содержимое TipTap в модульном тесте Vitest

Question

У меня есть компонент vue, содержащий редактор TipTap, с тестированием которого у меня возникают проблемы. Я использую 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/testing-libraryrenderс идентичными результатами (что неудивительно, поскольку я понимаю, что под капотом он использует 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>'
  )
});