Has anyone successfully used react-testing-library to test change events on a draftJS Editor component?

Question

​The fireEvent.change() just doesn't work.

It says there are no setters on the element.

I tried using aria selectors instead

const DraftEditor = getByRole('textbox')
DraftEditor.value ='something';
fireEvent.change(DraftEditor);

I tried same again using query selector

const DraftEditor = container.querySelector('.public-DraftEditor-content'));

Tried keyboard events instead.

Nothing.

Has anyone managed to text a rich text input with draftjs and react testing library?

Engel

Any new on this? – Cispadane

Nope. I gave up and ended up using cypress to do the test instead. – Engel

yeah so do I :) – Cispadane

A longer discussion on ways around this has been fleshed out on spectrum here – Engel

Answer 1

I managed to do it by getting inspiration from some issue description for draft-js and adapting that to our case at hand

import { createEvent } from "@testing-library/dom"
import { render, fireEvent } from "@testing-library/react"

---

function createPasteEvent(html) {
  const text = html.replace('<[^>]*>', '');
  return {
    clipboardData: {
      types: ['text/plain', 'text/html'],
      getData: (type) => (type === 'text/plain' ? text : html),
    },
  };
}

---

renderedComponent = render(<App />)
const editorNode = renderedComponent.querySelector(".public-DraftEditor-content")
const eventProperties = createPasteEvent(textToPaste)
const pasteEvent = createEvent.paste(editorNode, eventProperties)
pasteEvent.clipboardData = eventProperties.clipboardData
fireEvent(editorNode, pasteEvent)

Some additional notes:

• renderedComponent in my case is the parent element in which the Editor component is rendered.
• apparently, 'ClipboardEvent' is not implemented in JSDOM (see list of supported events), therefore, the call to createEvent.paste creates a generic Event, and not a ClipboardEvent. As a workaround, I copy the necessary clipboardData properties again to the generated generic event so that they will be taken into account by the function editOnPaste of the Draft-js editor, which itself will be triggered because of the fired event.

Bierce

this worked well, but it breaks on latest testing-library/dom version as pastEvent is readonly – Oquendo

@SibeliusSeraphini is right, but it seems the offending line (pasteEvent.clipboardData = ...) is not necessary? – Offset

Answer 2

I managed to get it working mocking the editor and intercepting the onChange method so you can still execute all the lib functions:

const draftjs = require('draft-js');

draftjs.Editor = jest.fn(props => {
  const modifiedOnchange = e => {
    const text = e.target.value;
    const content = ContentState.createFromText(text);
    props.onChange(EditorState.createWithContent(content));
  };
  return <input className="editor" onChange={e => modifiedOnchange(e)} />;
});

Defrock

I am really looking for a solution like this, but I couldn't find a way to mock it myself. Tried your answer but is says ContentState is not defined – Jarib

You have to import Content state class from draft js – Defrock