有没有人成功地使用react-testing-library在draftJS Editor组件上测试变更事件？

Question

fireEvent.change()无效。

它说元素上没有二传手。

我尝试使用aria选择器代替

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

我再次使用查询选择器尝试了相同的操作

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

改为尝试键盘事件。

没事。

任何人都可以使用draftjs输入富文本输入并响应测试库吗？

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。解决方法是，将必要的剪贴板数据属性再次复制到生成的通用事件中，以便Draft-js编辑器的函数editOnPaste将其考虑在内，该函数本身会由于触发事件而被触发。