reactjs - 使用 react 测试库测试 react-contenteditable

Question

如何测试这个组件:https://github.com/lovasoa/react-contenteditable ?如何在测试环境中模仿用户操作？我试过以下:

// The given element does not have a value setter
fireEvent.change(sourceContent, {
  target: { value: "New content text" }
});

// This doesn't emit onChange Changes text content but onChange is not fired.
fireEvent.change(sourceContent, {
  target: { textContent: "New content text" }
});

// This doesn't emit onChange. Changes inner html but onChange is not fired.
fireEvent.change(sourceContent, {
  target: { innerHTML: "New content text" }
});

以上都是失败的测试。我想如果我改变了innerHTML然后在 onChange中提供的功能将被解雇。这是存在此问题的示例项目: https://codesandbox.io/s/ecstatic-bush-m42hw?fontsize=14&hidenavigation=1&theme=dark

Answer 1

无法模拟 contenteditable 上的事件与 testing-react-library ，或任何使用 js-dom 的测试库，因为对 js-dom 的限制本身。

见讨论 here和 here .

解决方案是使用 puppeteer或其他使用真实浏览器进行渲染的方法。