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

修复了https://github.com/testing-library/user-event/issues/442后，现在可以使用userEvent：

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

Answer 2

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

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

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

Answer 3

由于自身的限制，不可能在 或任何使用 的测试库上contenteditable模拟testing-react-library事件。js-domjs-dom

请参阅此处和此处的讨论。

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