如何使用Jest测试FileReader

Question

I am trying to get 100% coverage in my test and it this one passes but then it still highlights the render.onload function

Component.jsx:

handleInputChange = (evt) => {
  evt.preventDefault();
  const { target } = evt;
  let value;
  let self = this;
  const reader = new FileReader();
  reader.onload = function (evt) {
    self.setState({
      previewPicture: evt.target.result,
      error: null
    });
  };
  reader.readAsDataURL(target.files[0]);
  value = target.files[0];          
  const name = target.name;
  this.setState({
    [name]: value
  });
};

Test:

    const evt = {
      target: {
        type: 'file',
        name: 'profilePicture',
        files: [{ name: 'testName' }]
      },
      preventDefault: jest.fn()
    };
    const component = mount(<Component {...props} />).instance();
    evt.target.files[0] = new Blob([evt.target.files[0]], {type : 'img/png'});
    component.handleInputChange(evt);
    expect(component.state.profilePicture).toEqual(file);
});

I want to have all covered in the test but I dont know test the FileRader

Answer 1

You dont need to test other component's behavior in the scope of your component.

So, if you are developing a component that uses FileReader() you must assume that FileReader() is working properly. FileReader() must have it own tests to guarantee that its behavior is also working well, this way we keep the responsability of each component in the scope of its implementation.