有没有人成功地使用 react-testing-library 来测试 draftJS Editor 组件上的更改事件?
Has anyone successfully used react-testing-library to test change events on a draftJS Editor component?
fireEvent.change()
就是行不通。
它说元素上没有设置器。
我尝试改用 aria 选择器
const DraftEditor = getByRole('textbox')
DraftEditor.value ='something';
fireEvent.change(DraftEditor);
我再次尝试使用查询选择器
const DraftEditor = container.querySelector('.public-DraftEditor-content'));
改为尝试键盘事件。
没有。
有没有人设法用 draftjs 和 react 测试库对富文本输入进行文本处理?
我设法做到了这一点,方法是从 draft-js 的一些问题描述中获得灵感并将其适应我们手头的案例
import { createEvent } from "@testing-library/dom"
import { render, fireEvent } from "@testing-library/react"
function createPasteEvent(html) {
const text = html.replace('<[^>]*>', '');
return {
clipboardData: {
types: ['text/plain', 'text/html'],
getData: (type) => (type === 'text/plain' ? text : html),
},
};
}
renderedComponent = render(<App />)
const editorNode = renderedComponent.querySelector(".public-DraftEditor-content")
const eventProperties = createPasteEvent(textToPaste)
const pasteEvent = createEvent.paste(editorNode, eventProperties)
pasteEvent.clipboardData = eventProperties.clipboardData
fireEvent(editorNode, pasteEvent)
一些补充说明:
- 在我的例子中,renderedComponent 是渲染编辑器组件的父元素。
- 显然,'ClipboardEvent'在JSDOM中没有实现(参见Draft-js编辑器的list of supported events), therefore, the call to createEvent.paste creates a generic Event, and not a ClipboardEvent. As a workaround, I copy the necessary clipboardData properties again to the generated generic event so that they will be taken into account by the function editOnPaste,它本身会因为触发事件而被触发。
我设法让它工作模拟编辑器并拦截 onChange
方法,这样你仍然可以执行所有库函数:
const draftjs = require('draft-js');
draftjs.Editor = jest.fn(props => {
const modifiedOnchange = e => {
const text = e.target.value;
const content = ContentState.createFromText(text);
props.onChange(EditorState.createWithContent(content));
};
return <input className="editor" onChange={e => modifiedOnchange(e)} />;
});
fireEvent.change()
就是行不通。
它说元素上没有设置器。
我尝试改用 aria 选择器
const DraftEditor = getByRole('textbox')
DraftEditor.value ='something';
fireEvent.change(DraftEditor);
我再次尝试使用查询选择器
const DraftEditor = container.querySelector('.public-DraftEditor-content'));
改为尝试键盘事件。
没有。
有没有人设法用 draftjs 和 react 测试库对富文本输入进行文本处理?
我设法做到了这一点,方法是从 draft-js 的一些问题描述中获得灵感并将其适应我们手头的案例
import { createEvent } from "@testing-library/dom"
import { render, fireEvent } from "@testing-library/react"
function createPasteEvent(html) {
const text = html.replace('<[^>]*>', '');
return {
clipboardData: {
types: ['text/plain', 'text/html'],
getData: (type) => (type === 'text/plain' ? text : html),
},
};
}
renderedComponent = render(<App />)
const editorNode = renderedComponent.querySelector(".public-DraftEditor-content")
const eventProperties = createPasteEvent(textToPaste)
const pasteEvent = createEvent.paste(editorNode, eventProperties)
pasteEvent.clipboardData = eventProperties.clipboardData
fireEvent(editorNode, pasteEvent)
一些补充说明:
- 在我的例子中,renderedComponent 是渲染编辑器组件的父元素。
- 显然,'ClipboardEvent'在JSDOM中没有实现(参见Draft-js编辑器的list of supported events), therefore, the call to createEvent.paste creates a generic Event, and not a ClipboardEvent. As a workaround, I copy the necessary clipboardData properties again to the generated generic event so that they will be taken into account by the function editOnPaste,它本身会因为触发事件而被触发。
我设法让它工作模拟编辑器并拦截 onChange
方法,这样你仍然可以执行所有库函数:
const draftjs = require('draft-js');
draftjs.Editor = jest.fn(props => {
const modifiedOnchange = e => {
const text = e.target.value;
const content = ContentState.createFromText(text);
props.onChange(EditorState.createWithContent(content));
};
return <input className="editor" onChange={e => modifiedOnchange(e)} />;
});