Unable to test wrapped editor

[zwik]

Hello, I've created a component that wraps tiptap. I wanted to test the component and I can't seem to get any output from tiptap in the test using Jest.

I have the following test:

it('should pass the prop to the editor', () => {
  const wrapper = mount(RichText, {
    propsData {
      value: 'test',
    },
  })
  expect(wrapper.vm.editor.content).toBe('test')
  expect(wrapper.vm.editor.getHTML()).toContain('test')
})

In my component I have the following code:

props: {
  value: {
    type: String,
    default: '',
  },
},
data() {
  return {
    editor: new Editor({
      onUpdate: ({ getHTML }) => {
        this.$emit('input', getHTML())
      },
    }),
   }
},
mounted() {
  this.editor.content = this.value
},

When I run this test, the first expect will yield good results, however, the second one does not. It will return <p></p> instead, which I didn't expect. I would expect <p>test</p>. What can I do to get the correct output? Is there something I miss? I've also tried waiting for nextTick, but that doesn't seem to help either. Any ideas?

[BrianHung]

Can you try if using this.editor.setContent(this.value); helps?

[zwik]

That unfortunately results in the same output,

[zwik]

I've created a codesandbox with all the "working" code here: https://codesandbox.io/s/elegant-bohr-s9il4

[zwik]

With the latest release (1.27.0) it actually got worse. Now when you mount the Component that uses tiptap, you will get the following error:

TypeError: Cannot read property '$scopedSlots' of undefined

[bigsee]

Did you figure this out in the end?

[JavierMartinz]

Same here

[MrEarle]

Same here

[nlhkabu]

I am experiencing the same issue. Has anyone found a solution?

[ojh]

Try calling await flushPromises() in your test, once your component is mounted: https://test-utils.vuejs.org/api/#flushpromises