访问我的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 (将#修改为@）