我在应用程序中使用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:无法通过以下方式找到元素:

如果我try 通过以下操作以不同的方式获取编辑器文本字段:

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

我得到以下错误:

无法触发"更改"事件-请提供DOM元素.

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

推荐答案

这不是一个非常优雅的解决方案,但我在运行jest个单元测试时初始化了CKEditor个数据,如下所示:

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

Javascript相关问答推荐

为什么子组件没有在reaction中渲染?

在卡信息之间切换

如何在JavaScript中通过一次单击即可举办多个活动

使用续集和下拉栏显示模型属性

单击ImageListItemBar的IconButton后,在Material—UI对话框中显示图像

当点击注册页面上的注册按钮时,邮箱重复

还原器未正确更新状态

制作钢琴模拟器,并且在控制台中不会执行或显示该脚本

如何通过将实例方法的名称传递给具有正确类型的参数的继承方法来调用实例方法?

为什么123[';toString';].long返回1?

WhatsApp Cloud API上载问题:由于MIME类型不正确而导致接收&Quot;INVALID_REQUEST";错误

在我的index.html页面上找不到我的Java脚本条形图

SPAN不会在点击时关闭模式,尽管它们可以发送日志(log)等

自定义图表工具提示以仅显示Y值

如何在Java脚本中对列表中的特定元素进行排序?

Docent.cloneNode(TRUE)不克隆用户输入

在Vercel中部署Next.js项目时获取`ReferenceError:未定义文档`

MongoDB中的嵌套搜索

用于测试其方法和构造函数的导出/导入类

P5JS-绘制不重叠的圆