12

React Dropzoneをテストしており、onDrop 関数を確認する必要があります。この関数には 2 つのパラメーター (acceptedFiles と rejectFiles) があります。私は次のようにファイルをモックしています:

let image = {
  name: 'cat.jpg',
  size: 1000,
  type: 'image/jpeg'
};

次に、私のテストでは、次のようにします。

it('should call handleOnDrop with more than 5 acceptedFiles', () => {
    const wrapper = mount(mockComponent());

    for (let index = 0; index < 5; index++) {
      images.push(image);
    }

    wrapper.find(Dropzone).simulate('drop', { dataTransfer: { files: images } });

    expect(setUserNotificationsSpy).toHaveBeenCalledTimes(1);
});

これは私の onDrop 関数です:

const handleOnDrop = (acceptedFiles, rejectedFiles) => {
    if (rejectedFiles && rejectedFiles.length) {
      checkMaxFile(rejectedFiles, maxSize) && setUserNotifications('error_big_image');
    }

    acceptedFiles && acceptedFiles.length <= maxFiles ? onDrop(acceptedFiles) : setUserNotifications('more_than_5');
};

予想される結果は、handleOnDrop がacceptedFiles を返しますが、rejectedFiles を返し、その理由はわかりません。

MIMEタイプでサイズもOKです。

これは、react-dropzone の関数です。

  fileAccepted(file) {
      // Firefox versions prior to 53 return a bogus MIME type for every file drag, so dragovers with
      // that MIME type will always be accepted
      return file.type === 'application/x-moz-file' || accepts(file, this.props.accept);
  }

ありがとう。

4

4 に答える 4