如何测试 CKEditor 的变化

Question

我在我的应用程序中使用了来自 ckeditor4-react 的 CKEditor 组件。我想创建一个 jest 测试，它将使用 react-testing-library 在这个 CKEditor 组件中写一些东西。

目前，我的组件包含如下代码：

const handleChange = (event: any) => {
    setBody(event.editor.getData());
};

<CKEditor
  onChange={handleChange}
  data-testid="ckeditor-textfield"
/>

这在手动测试时工作正常。

在我的 Jest 测试中，我得到了以下内容：

const editorText = screen.getByTestId('ckeditor-textfield');
fireEvent.change(editorText, { target: { value: 'Email body text' } });

但是，这不起作用，我得到一个错误：

TestingLibraryElementError: Unable to find an element by: [data-testid="ckeditor-textfield"]

如果我尝试通过以下方式获取编辑器文本字段的不同方式：

const editorText = document.getElementsByClassName('cke_editable')[0];

我收到以下错误：

Unable to fire a "change" event - please provide a DOM element.

如何测试 CKEditor 组件的输入字段？

Answer 1

这不是一个非常优雅的解决方案，但我已经在运行 jest 单元测试时初始化了 CKEditor 数据：

<CKEditor
   initData={ process.env.JEST_WORKER_ID !== undefined && <p>unit tests data</p> }
/>

如何测试 CKEditor 的变化

How to test a CKEditor change

javascript

ckeditor

reactjs

jestjs