如何解决访问我的ReactWrapper中的输入以单击它并模拟更改
我试图在组件内部定位input
,以便可以在其上simulate
change
。当我以输入为目标并用console.log
检查输入是否为目标时,我在控制台中得到的只是ReactWrapper {}
。有人知道我为什么不能针对我的输入吗?
测试:
test("calls onClick prop",() => {
const onClickSpy = jest.fn();
const component = mount(<FileUploadButton onClick={onClickSpy} />);
console.log(component.debug());
const input = component.find(".test-help");
console.log(input);
input.simulate("change",{
target: {
files: ["test"]
}
});
expect(onClickSpy).toHaveBeenCalledWith(["test"]);
expect(component.exists()).toBe(true);
组件(从控制台)
<FileUploadButton onClick={[Function: mockConstructor]}>
<ForwardRef type="button" onClick={[Function: onRefClick]} className="c-file-upload-button__upload-btn" onKeyDown={[Function: onKeyDown]} icon={{...}} modifier="primary" outline={false} pill={false} disabled={false} loading={false} tabIndex={{...}} cypress={{...}} size="h3">
<button className="c-button c-button--primary c-file-upload-button__upload-btn" type="button" onClick={[Function: onRefClick]} onKeyDown={[Function: onKeyDown]} disabled={false} tabIndex={{...}} data-cy={{...}}>
<Typography size="h3" bold={true} className="c-button__text" color="primary" noWrap={false} decoration={{...}}>
<span className="c-typography c-typography--h3 c-typography--bold c-typography--color-primary c-button__text">
Upload CSV
</span>
</Typography>
</button>
</ForwardRef>
<input className="test-help" type="file" />
</FileUploadButton>
console.log src/components/FileUploadButton/fileUploadButton.test.js:16
ReactWrapper {}
Error: expect(jest.fn()).toHaveBeenCalledWith(...expected)
Expected: ["test"]
Number of calls: 0
实际文件input
中的FYI我有一个ref
属性,由于某种原因该属性未在控制台中显示。.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。