Cannot mount TipTap content in Vitest unit test

Question

I have a vue component that contains a TipTap editor, which I am having problems testing. I am using Vitest with vue-test-utils.

This is my component:

<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>

My test:

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>
  });

Everything works fine in the browser, but in the unit test, I cannot get the content of the tiptap editor to render.

I have also tried this with vue/testing-library's render function, with identical results (somewhat unsurprisingly, as I understand that it uses vue-test-utils under the hood).

What's going on here??

Answer 1

You need to make your test asynchronous and flush any unresolved promises:

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>'
  )
});