如何用 jest 和 vue-test-utils 模拟上传文件进行测试答案

【问题标题】：How to test with jest and vue-test-utils simulate upload file如何用 jest 和 vue-test-utils 模拟上传文件进行测试
【发布时间】：2022-01-13 08:40:02
【问题描述】：

我在 vue-test-utils 中使用 jest，我想要上传文件的测试方法。 vue文件组件中的这个方法。

async uploadFiles(file){
  this.$refs.iconUpload.setAttribute('data-load', 'loading')
  let formData = new FormData();
  formData.append('image', file);

  try{
    const result = await fetch('/upload', {
      method: 'POST',
      body: formData,
    })
    const data = await result.json();
    if(data.status){
      this.$refs.iconUpload.setAttribute('data-load', 'success')
      this.$refs.btnClear.style.display = 'none';
      this.$refs.btnGoBack.style.display = 'none';
      this.uploadDone = true;
    }else {
      this.showSpecialError(this.$refs.elseError)
    }
  }catch (e){
    this.showSpecialError(this.$refs.elseError)
    return null
  }
}

我想用resolve和reject来测试它

const file = {
  size: 500,
  type: 'image/png',
  name: 'image.png
};

const event = {
  target: {
    files: [file],
  },
};

global.fetch = jest.fn(() => Promise.resolve({
  json: () => Promise.resolve({ data })
}));

test('the function of sending the file returns the required response on a successful response', async () => {
    const result = await wrapper.vm.uploadFiles(event)
    expect(result).toEqual(file)
})

但测试总是返回 null

【问题讨论】：

对于初学者来说，fetch 被错误地模拟了。不会有data.status。然后uploadFiles 不返回结果

标签： javascript vue.js jestjs vue-test-utils

【解决方案1】：

在测试中，您正在等待uploadFiles 函数的结果。但是 uploadFiles 没有 return 文件，正如您的测试所期望的那样。

如果在 try {} 块的末尾添加：

return data;

因为uploadFiles 是async，所以返回的值会自动包装在一个promise 中。所以它相当于在同步函数中返回Promise.resolve(data)。

但是在 try{} 块的末尾返回 data 并不是你应该做的，真的。

在您的组件方法中，您从/upload 调用的响应中检查的唯一内容是响应（if (data.status)）上是否设置了真实的status。这是完全错误的，因为404（未找到）的状态是真实的。 500 的状态也是如此（服务器错误）。事实上，所有服务器错误状态都是真实的，因为它们都是有限的正数。

回到测试，你有两个选择：

a)
如果你想测试当前的组件代码（你不应该），你需要测试的是当 fetch 返回一个包含真实状态值的响应时，wrapper.vm.uploadDone 是否被设置为true。

此测试将通过您当前的组件：

global.fetch = jest.fn(() => Promise.resolve({
  json: () => Promise.resolve({ status: 404 })
}));

test('uploadDone gets set to true when receiving a truthy response from /upload', async () => {
   expect(wrapper.vm.uploadDone).toBe(false);
   await wrapper.vm.uploadFiles({
     size: 500,
     type: 'image/png',
     name: 'image.png'
   });
   expect(wrapper.vm.uploadDone).toBe(true);
})

但是，实际上，当收到状态不是200 的结果时，您的uploadFiles 不应该设置uploadDone。

我给你的建议是选择替代方案：

b)
向团队中的高级人员寻求帮助，他可以详细解释上述内容并帮助重写uploadFiles 函数。除非那个方法没有做它应该做的事情，否则为它编写测试没有多大意义。

进行测试以确保应用在外部系统出现故障时以及它们按预期执行时都按预期运行。
我的印象是，您的应用目前没有达到预期的效果。

所以根据实际（客户）的期望来编写测试。而不是编写符合所有期望的代码。

【讨论】：