Javascript 如何正确测试ROP法

我正在测试，我需要检查onDrop函数。此函数有两个参数（acceptedFiles和rejectedFiles）。我在模仿这样的文件：

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

const createFile = (name, size, type) => ({
  name,
  path: name,
  size,
  type,
});

const files = [
  createFile('foo.png', 200, 'image/png'),
  createFile('bar.jpg', 200, '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);
});

谢谢。

路过时

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

进入

它会认为图像未定义或为空。 我解决这个问题的方法是

//Create a non-null file
const fileContents = "file contents";
const file = new Blob([fileContents], { type: "text/plain" });

 wrapper.find(Dropzone).simulate("drop", { dataTransfer: { files: [file] } });

---

对于纯文本文件，您当然会这样做。对于不同类型的图像，您需要指定图像类型，而不是执行“text/plain”

我在使用

useDropzone

钩子时遇到了这个问题。使用

wrapper.find(...).simulate('drop', ...);

不适合我

相反，我在

input

字段上模拟了

change

。这适合我对组件进行单元测试的用例。我不关心测试组件的特定drop功能，因为这超出了对组件进行单元测试的范围。假设

react dropzone

正常工作，我只需要测试我的组件是否正确处理文件丢弃事件，我仍然可以通过与

input

字段交互来测试。它还有一个很好的副作用，就是更加通用，以防将来我交换dropzone库

wrapper.find('input').simulate('change', {
  target: { files },
  preventDefault: () => {},
  persist: () => {},
});

我将我的

文件定义如下：

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

const createFile = (name, size, type) => ({
  name,
  path: name,
  size,
  type,
});

const files = [
  createFile('foo.png', 200, 'image/png'),
  createFile('bar.jpg', 200, 'image/jpeg'),
];

同样，它适合我的用例，只创建这样的模拟文件对象，而不是使用本机
文件
。如果需要，可以添加更多属性（例如，
lastModifiedDate
），但我没有

如果出于某种原因，您觉得需要创建适当的
文件
实例，您也可以这样做：

const createFile = (name, size, type) => {
  // the first arg, [], is the file content
  // it's irrelevant, so I left it blank
  // you can fill it like ['foobar'] or [name] if you want to
  const file = new File([], name, { type });
  Reflect.defineProperty(file, 'size', {
    get() {
      return size;
    }
  });
  return file;
};

由于未设置
path
属性，我在测试过程中遇到了一些问题。检查本机
文件
对象的相等性也相当麻烦。序列化的文件对象最终将成为
{}
，这显然是没有用的。我相信您可以让它正常工作，但在我看来，如果可以的话，请避免使用本机
文件
对象。在我的测试中使用它们没有任何好处。
如果有人在创建存根文件后遇到任何进一步的问题，我发现在dataTransfer选项中还提供了一个types字段，以绕过dropzone使用的一些检查。我用的是RTL，所以是ymmv

const fakeVideo = new File(['muhaahahah'], 'hello.mp4', { type: 'video/mp4' });

fireEvent.drop(getByTestId('test-input'), {
   dataTransfer: { files: [fakeVideo], types: ['Files'] }
});

我正在使用react测试库，这对我来说非常有效，
我已经将测试id附加到从useDropZone钩子获取getRootProps的div，它不一定是div，也可以是任何容器元素


功能分派EVT（节点：任意，类型：任意，数据：任意）{
const event=新事件（类型，{bubbles:true}）；
分配（事件、数据）；
fireEvent（节点，事件）；
}
异步函数flushPromises（rerender:any，ui:any）{
等待动作（（）=>wait（（）=>rerender（ui））；
}
const onDropMock=jest.fn（）；
它（“拖放文件时调用on-Drop”，async（）=>{
const file=new文件（[JSON.stringify（{ping:true}）]，“fileName.csv”，{type:“text/csv”}）；
const data=mockData（[file]）；
常数ui=；
const{container，rerender}=render（ui）；
const input=screen.getByTestId（“div的testId”）；
dispatchEvt（输入“下降”，数据）；
等待flushPromises（重新加载，用户界面）；
期望（onDropMock）.tohavebeincalled（）；
});被调用的时候被调用，因为我已经有一段时间没有访问这些测试的代码库了，所以我面前没有任何东西可以用来进一步帮助你。您可能想在此处提出一个新问题，并提供代码片段。如果你创建了一个问题，请随时联系我。较大的代码片段可能意味着我可以看到问题。这不是触发onDrop函数
const fakeVideo = new File(['muhaahahah'], 'hello.mp4', { type: 'video/mp4' });

fireEvent.drop(getByTestId('test-input'), {
   dataTransfer: { files: [fakeVideo], types: ['Files'] }
});