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?

Nope. I gave up and ended up using cypress to do the test instead. — Josh Pittman, Jul 26 '19 at 19:36
A longer discussion on ways around this has been fleshed out [on spectrum here](https://spectrum.chat/testing-library/help/has-anyone-successfully-used-rtl-to-test-change-events-on-a-draftjs-text-box~f1928053-9e53-407a-9be5-70babeb4b692) — Josh Pittman, Dec 06 '19 at 08:04

score 11 · Accepted Answer · answered Oct 18 '19 at 13:49

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.

this worked well, but it breaks on latest testing-library/dom version as pastEvent is readonly — Sibelius Seraphini, Aug 27 '20 at 20:05
@SibeliusSeraphini is right, but it seems the offending line (`pasteEvent.clipboardData = ...`) is not necessary? — jorgen, Sep 21 '20 at 18:21

score 2 · Answer 2 · answered Feb 20 '20 at 13:53

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

answered Feb 20 '20 at 13:53

Gustavo Freire

105
8

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` – Bruno Monteiro Jul 26 '20 at 21:47
You have to import Content state class from draft js – Gustavo Freire Jul 28 '20 at 11:08

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

2 Answers2