javascript - 有没有人成功地使用 react-testing-library 来测试 draftJS Editor 组件上的更改事件？

Question

fireEvent.change() 根本不起作用。

它说元素上没有 setter 。

我尝试改用 aria 选择器

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

我再次尝试使用查询选择器

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

改为尝试键盘事件。

没有。

有没有人设法用 draftjs 和 react 测试库来文本文本输入？

Answer 1

我设法通过从 draft-js 的一些问题描述中获得灵感来做到这一点并根据我们手头的情况进行调整

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)

一些补充说明:

• 在我的例子中，renderedComponent 是呈现编辑器组件的父元素。
• 显然，'ClipboardEvent' 未在 JSDOM 中实现(参见 list of supported events )，因此，对 createEvent.paste 的调用创建了一个通用事件，而不是 ClipboardEvent。作为解决方法，我再次将必要的 clipboardData 属性复制到生成的通用事件中，以便函数 editOnPaste 考虑到它们Draft-js 编辑器的功能，它本身将因触发的事件而被触发。