我正在使用TypeScript构建一个React JS应用程序。在我的应用程序中，我在表单中使用TinyMCE编辑器。我还在TypeScript中使用Cypress编写集成测试。我现在在使用TypeScript设置Cypress中的TinyMCE编辑器值时遇到了麻烦。我正在使用这个库来操作Cypress中的TinyMCE编辑器，https://github.com/ForeachOS/cypress-tinymce。
这是我的React JS TinyMCE编辑器代码
import React, { FC } from 'react'
import { Editor } from '@tinymce/tinymce-react'
interface RichEditorFieldProps {
id: string
name?: string
value?: string
onChange: (fieldName: string, value: string) => void
}
const RichEditorField: FC<RichEditorFieldProps> = (
props: RichEditorFieldProps
) => {
const getFieldName = () => {
return props.name ? props.name : props.id
}
return (
<div cy-data-id={props.id} className={'rich-editor-field-container'}>
<Editor
id={props.id}
apiKey={'zjf0nctg4gmjj0a5u5uxm7pcrs0ka4hwcuxzskhxh5hauugf'}
value={props.value ?? ''}
onEditorChange={(content) => {
props.onChange(getFieldName(), content)
}}
/>
</div>
)
}我将该组件渲染如下：
<FormRichEditorField
value={formik.values.specification}
label={'Specification'}
error={
formik.touched.specification &&
formik.errors.specification
}
id={'specification'}
onChange={formik.setFieldValue}
/>我想强调的是编辑器的ID是specification。
为了在Cypress中编写测试，我安装了我提到的包https://github.com/ForeachOS/cypress-tinymce。
在我安装了这个包并将其导入support/index.ts文件后，我不能像下面这样调用函数：
cy.setTinyMceContent('specification', 'This is the new content');我必须添加以下代码以使其与TypeScript兼容：
declare namespace Cypress {
interface Chainable<Subject = any> {
setTinyMceContent(tinyMceId: string, content: any): void
}
}然后我在Cypress测试中设置TinyMCE编辑器字段的值如下：
cy.setTinyMceContent('specification', 'This is testing')当我运行测试时，我得到以下错误：
Cannot read properties of undefined (reading 'specification')
我的代码出了什么问题，如何修复？
2条答案
按热度按时间qyuhtwio1#
cypress-tinymce包看起来已经过时了。在最新的版本6 tinyMCE上没有editors属性。以下是我目前为止最好的。有几个地方你需要等待编辑器旋转起来。
第二个等待当前的文本内容，这是不好的，因为它太具体了。我还没有找到一个更好的方法来做到这一点。
更新自@WaiyanHein评论
React应用程序正在控制内容，您可能会看到文本更改为“这是新内容”，然后恢复为“一些文本”。
我认为这是由
onChange()事件触发引起的，该事件重新呈现组件并将其设置回应用程序的文本。正因为如此，通过应用程序操作来控制React应用程序可能比直接使用tinyMCE API更好。这取决于您的测试目标。
enxuqcxy2#
这就是我在v6中的工作原理