Has anyone successfully used react-testing-library to test change events on a draftJS Editor component?
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.