How to unit test EditorContent

[jacobleetodd]

Hi There,

I'm using EditorContent and useEditor from @tiptap/react to build a basic rich text editor which is replacing a MUI TextField component. This results in the following default HTML rendered to the screen:

<div contenteditable="true" translate="no" class="ProseMirror" tabindex="0">
    <p>
        <br class="ProseMirror-trailingBreak">
    </p>
</div>

We use React Testing Library (RTL) and Jest for our unit tests. Since I am replacing a TextField there are a number of existing test suites that need to be updated. In order to do so, I need to select the appropriate DOM element and type something in it. I am able to select the div:

const editor = container.getElementsByClassName("ProseMirror")[0]

Or the p tag:

const ptag = container.querySelector('p')

But when I try to type in either of them:

await user.type(editor, "abc");

The tests fail and light up with errors:

  console.error
    Error: Uncaught [TypeError: (intermediate value)(intermediate value)(intermediate value).elementFromPoint is not a function]
    
  console.error
    Error: Uncaught [TypeError: target.getClientRects is not a function]

The strange thing is that when I screen.debug() I can see that the text is in the DOM:

      <div
          class="ProseMirror ProseMirror-focused"
          contenteditable="true"
          tabindex="0"
          translate="no"
        >
          <p>
            <br
              class="ProseMirror-trailingBreak"
            />
          </p>
          <p>
            abc
          </p>
      </div>

These feel like internal errors or are perhaps related to rendering the component in jsdom. I haven't been able to find any documentation or really any mention of how to unit test around the EditorContent component. This seems like a common use case so I am very confused. Any help is greatly appreciated!

[AnnyCaroline]

Hi, @jacobleetodd . I'm having the same issue.

Are you using @testing-library/user-event, right? AFAIK, userEvent.type only works with inputs and textareas: https://testing-library.com/docs/ecosystem-user-event/#typeelement-text-options

I tried to use fireEvent.keyPress instead. I received no errors, but my modifications are ignored.

[jacobleetodd]

Yes exactly userEvent.type, we do this:

const user = userEvent.setup();

[phfarolfi]

I'm having the same problem... even a simple change doesn't work.

const { container } = render(<RichText {...props} initialValue="foo" />)
const content = container.querySelector('.ProseMirror')
const text = content.querySelector('p')

fireEvent.keyPress(text, { key: 'a', keyCode: 'keyA' })

expect(text).toMatchInlineSnapshot(`
    <p>
        foo
    </p>
`)

[josokinas]

Came here for the same reason 🤔

[vojvodics]

What I've found is that there seems to be an issue with happy-dom/jsdom. Prosemirror is relying on some layout APIs, which aren't/can't be mocked in a non-browser environment. I tried mocking those APIs manually but didn't find a solution, so in the end, we switched to Cypress component tests for testing the editor.

[gdfreitas]

I was having the same issue and the snippet below met my needs. Credits to olpa on StackOverflow

function getBoundingClientRect(): DOMRect {
  const rec = {
    x: 0,
    y: 0,
    bottom: 0,
    height: 0,
    left: 0,
    right: 0,
    top: 0,
    width: 0,
  };
  return { ...rec, toJSON: () => rec };
}

class FakeDOMRectList extends Array<DOMRect> implements DOMRectList {
  item(index: number): DOMRect | null {
    return this[index];
  }
}

document.elementFromPoint = (): null => null;
HTMLElement.prototype.getBoundingClientRect = getBoundingClientRect;
HTMLElement.prototype.getClientRects = (): DOMRectList =>
  new FakeDOMRectList();
Range.prototype.getBoundingClientRect = getBoundingClientRect;
Range.prototype.getClientRects = (): DOMRectList =>
  new FakeDOMRectList();

[kmmccafferty96]

This was working great until upgrading to a recent version (went from v2.1.13 to v2.4.0). Anyone have any ideas?

[sinnbeck]

This is my complete test that works for me in v2.4.0

import React from 'react'
import {render, waitFor} from '@testing-library/react'
import {describe, expect, it, vi} from 'vitest'
import TiptapEditor from '@/Components/Editor/TiptapEditor.jsx'
import {userEvent} from '@testing-library/user-event'

// Mock the MenuBar component
vi.mock('@/Components/Editor/MenuBar', () => ({
    default: vi.fn(() => <div data-testid="menu-bar"></div>),
}))

function getBoundingClientRect() {
    const rec = {
        x: 0,
        y: 0,
        bottom: 0,
        height: 0,
        left: 0,
        right: 0,
        top: 0,
        width: 0,
    }
    return {...rec, toJSON: () => rec}
}

class FakeDOMRectList extends DOMRect {
    item(index) {
        return this[index]
    }
}

document.elementFromPoint = () => null
HTMLElement.prototype.getBoundingClientRect = getBoundingClientRect
HTMLElement.prototype.getClientRects = () => new FakeDOMRectList()
Range.prototype.getBoundingClientRect = getBoundingClientRect
Range.prototype.getClientRects = () => new FakeDOMRectList()

describe('TiptapEditor', () => {
    it('should render correctly with given content and mentions', async () => {
        const mockContent = '<p>Hello, world!</p>'
        const mockOnChange = vi.fn()
        const mockMentions = [{id: 1, name: 'John Doe'}]

        const {container, getByTestId} = render(
            <TiptapEditor
                content={mockContent}
                onChange={mockOnChange}
                mentions={mockMentions}
            />
        )

        // Check if the MenuBar is rendered
        expect(getByTestId('menu-bar')).toBeInTheDocument()

        // Check if the EditorContent is rendered
        const editor = await waitFor(() =>
            container.querySelector('.ProseMirror').querySelector('p')
        )

        expect(editor).toBeInTheDocument()
    })

    it('should call onChange with the updated HTML content', async () => {
        const mockContent = ''
        const mockOnChange = vi.fn()
        const mockMentions = [{id: 1, name: 'John Doe'}]

        const {container} = render(
            <TiptapEditor
                content={mockContent}
                onChange={mockOnChange}
                mentions={mockMentions}
            />
        )
        const user = userEvent.setup()

        const editor = await waitFor(() =>
            container.querySelector('.ProseMirror').querySelector('p')
        )

        await user.type(editor, 'New content')

        expect(editor).toMatchInlineSnapshot(`
    <p>
      New content
    </p>
`)

        expect(mockOnChange).toHaveBeenCalledTimes(11)
        expect(mockOnChange).toHaveBeenCalledWith('<p>New content</p>')
    })
})

[sross0988]

I was having the same issue and the snippet below met my needs. Credits to olpa on StackOverflow

function getBoundingClientRect(): DOMRect {
  const rec = {
    x: 0,
    y: 0,
    bottom: 0,
    height: 0,
    left: 0,
    right: 0,
    top: 0,
    width: 0,
  };
  return { ...rec, toJSON: () => rec };
}

class FakeDOMRectList extends Array<DOMRect> implements DOMRectList {
  item(index: number): DOMRect | null {
    return this[index];
  }
}

document.elementFromPoint = (): null => null;
HTMLElement.prototype.getBoundingClientRect = getBoundingClientRect;
HTMLElement.prototype.getClientRects = (): DOMRectList =>
  new FakeDOMRectList();
Range.prototype.getBoundingClientRect = getBoundingClientRect;
Range.prototype.getClientRects = (): DOMRectList =>
  new FakeDOMRectList();

For those wanting more context on how to use this with @testing-library/react. You can add this code to your test file to remove any rendering errors and then test changing the editor component with:

      const emailEditor = container.querySelector('.ProseMirror').querySelector('p');

      fireEvent.change(emailEditor, {
        target: { textContent: 'To whom it may concern...' }
      });
      

It took me a lot of searching and testing different combinations to get this right so I hope this helps someone.

Thanks to everyone else for all the useful info on this thread!

[McKayMower]

if you are using useEditor, you can do it the following way:

interface Props {
  testid: string
  // other props
}

export const Tiptap = ({testid, ...props}: Props) => {
   const editor = useEditor({
    // other editor config
    editorProps: {
      attributes: {
        testid: testid
      },
    },
  });
  
  return (
     <EditorContent
        editor={editor}
      />
  )
}

then, you can go inspect the HTML in localhost or in your test environment to validate the testid appears as an attribue. hope this helps!