Javascript 如何测试&x27；粘贴&x27；带有React测试库的通用输入文本中的事件_Javascript_Reactjs_Paste_React Testing Library

Javascript 如何测试&x27；粘贴&x27；带有React测试库的通用输入文本中的事件

javascript reactjs

Javascript 如何测试&x27；粘贴&x27；带有React测试库的通用输入文本中的事件,javascript,reactjs,paste,react-testing-library,Javascript,Reactjs,Paste,React Testing Library,我正在尝试使用rect测试库在“集成”中测试粘贴功能。到目前为止，我已经能够触发“粘贴”事件，并看到粘贴事件被传递到输入字段的onPasteprop 我想测试的是被粘贴的元素的实际值。下面是一个例子：从“@material ui/core”导入{TextField}；它（'如果值不正确，则应显示空单元格'，async（）=>{ const{getByDisplayValue}=wait render( { log（event.clipboardData.getData（'text'）； }

我正在尝试使用rect测试库在“集成”中测试粘贴功能。到目前为止，我已经能够触发“粘贴”事件，并看到粘贴事件被传递到输入字段的

onPaste

prop

我想测试的是被粘贴的元素的实际值。下面是一个例子：


从“@material ui/core”导入{TextField}；
它（'如果值不正确，则应显示空单元格'，async（）=>{
const{getByDisplayValue}=wait render(
{
log（event.clipboardData.getData（'text'）；
}}
onChange={e=>{
console.log（e.currentTarget.value）；
}}
/>
);
常量输入=等待getByDisplayValue（“”）；
const eventProperties={
剪贴簿数据：{
getData:jest.fn（）.mockReturnValueOnce（'Foo-Bar-Test'），
},
};
const pasteEvent=createEvent.paste（输入，eventProperties）；
pasteEvent.clipboardData=eventProperties.clipboardData；
fireEvent（输入，粘贴事件）；
等待等待（（）=>{
getByDisplayValue（“Foo-Bar测试”）；
});
});

因此，我得到：

console.log MyComponent.test.js:110
    Foo Bar Test


TestingLibraryElementError: Unable to find an element with the display value: Foo Bar Test.

<body>
  <div>
    <div
      class="MuiFormControl-root MuiTextField-root"
    >
      <div
        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
      >
        <input
          aria-invalid="false"
          class="MuiInputBase-input MuiInput-input"
          type="text"
          value=""
        />
      </div>
    </div>
  </div>
</body>

console.log MyComponent.test.js:110
Foo-Bar测试
TestingLibraryElement错误：找不到显示值为Foo Bar Test的元素。

我希望

TextField

的

value

prop将填充粘贴事件的内容，但正如您所看到的，它是空的。另外，我希望触发

onChange

事件，但情况也并非如此（测试中没有显示控制台日志）。

好的，在示例中，您的

TextInput

有一个静态值，

”

，因此它不能更改。实际的组件代码是什么样子的？如果您在测试中使用

defaultValue

，是否有效？嘿，Drew，谢谢您的回复。是的，你的价值观绝对正确。问题是没有执行

onChange

回调。不同的是，对于

firevent.input（输入，{target:{value:'my test'}）我可以看到onChange
控制台日志正在发生。我也希望看到paste
事件也会发生这种情况。