对React功能组件中的文件类型输入进行单元测试

Question

我在react中具有一个功能组件，该组件基本上显示文件浏览器，并且用户选择的文件名将传递给调用者。 我正在尝试为此功能编写单元测试。 我正在使用useRef显示文件浏览器

function SelectFile(props) {
    const ref1 = useRef();

    const handleChange = () => {
        console.log(ref1.current.files[0].name);
    };

    return (
        <div>
            <label onClick = ref1.current.click()>Select</label>
            <input type = "file" style={{ display: 'none' }} ref={ref1} 
             onChange={handleClick} />
        </div>
    );
}

我现在进行的测试是这样的：

const wrapper = mount(<SelectFile />)
const input = wrapper.find('input');
input.simulate('change', {
      target: {
         files: [
           'fileName'
         ]   
      }
    });

上面的代码和测试给了我一个异常，说： 无法读取未定义的属性“名称”

但是，当我运行代码时，我可以在handleChange函数中以正确的文件名在控制台中看到正确的日志