用jest酶测试jest电流特性

Question

我试图测试一个隐藏的文件输入点击使用Jest酶，为以下组件。

const UploadField = ({handleFileUpload}) => {
    const hiddenFileInputRef = React.useRef(null);

    const handleChange = (event) => {
        handleFileUpload(event.target.files[0]);
    };

    const handleClick = () => {
        hiddenFileInputRef.current.click();
    };

    return (
        <>
            <input
                type="file"              
                ref={hiddenFileInputRef}
                onChange={handleChange}
                style={{display: 'none'}}
            />
            <div
                onClick={handleClick}
                className="upload-button-container">
              upload file
            </div>
        </>
    );
};

我尝试了以下测试：

        it('should call handle click of hidden fileinput on click of div', () => {
            const useRefSpy = jest
                .spyOn(React, 'useRef')
                .mockReturnValueOnce({current: {click: jest.fn()}});
            let divWrapper = wrapper.find(
                '.upload-button-container'
            );
            divWrapper.simulate('click');
            expect(useRefSpy).toBeCalledTimes(1);
           
        });

它提供了一个错误"TypeError:无法读取属性‘单击’的null“。我在这里做错什么了？

Answer 1

1. 试图通过日志记录wrapperDiv.html()或调试
2. 来检查是否能够找到正确的div，我认为您可能必须像在本文中那样传递该事件。Simulating a Div Click on Enzyme and React