使用 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

看来您应该使用 fireEvent.input 来测试输入。所以如下：

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

将是模仿用户输入的好方法。

Answer 2

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

查看讨论 here and here。

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

Answer 3

正如 Paul 在 Github here 上所说：“不幸的是，目前此功能尚未添加到 JSDOM，但有人在 React 中构建需要测试的功能 ContentEditable，据我所知，就目前的情况而言，目前的 RTL 是不可能的。"

但一种可行的方法是触发模糊事件并更改输入。见下文：

fireEvent.blur(NameField, {target: {textContent: 'edited-text'}});

Answer 4

与https://github.com/testing-library/user-event/issues/442 fixed, it's now possible with userEvent:

const element = screen.getByTestId("myEditableElement");
await userEvent.click(element);
await userEvent.keyboard("abc");
expect(element.textContent).toBe("abc");

使用 React 测试库测试 react-contenteditable

Testing react-contenteditable with react testing library

reactjs

react-testing-library