如何使用模拟来测试用笑话上传文件

Question

我正在用 nuxt js 开发一个系统，我开玩笑说其中一部分我想上传一张图片。

这是我的 html 代码：

<input
    id="photo"
    ref="photo"
    type="file"
    name=""
    class="form-control d-flex"
    @change="uploadPhoto"
>

这是我在 nuxt js 中的上传照片功能：

uploadPhoto () {
    const file = this.$refs.photo.files[0]
    // upload photo
    const formData = new FormData()
    formData.append('photo', file)
    const returnedData = await this.$axios.$post('/api/photo/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
}

问题是：

如何开玩笑地模拟上传照片来测试我的代码？

我的笑话代码是这样的：

test('uploading photo test', () => {
wrapper = mount(UploadPhotoComponent, {
  stubs: {
    NuxtLink: true
  },
  mocks: {
    $auth: {
      loggedIn: true,
      $storage: {
        _state: {
          '_token.local': 'api bearer token'
        }
      }
    },
    $axios: {
      $post: jest.fn(() => {
        return Promise.resolve({
          status: 200,
          message: 'photo was uploaded successfully.',
          entire: []
        })
      })
    }
  }
  
  })
})

我不知道如何使用 mock 来测试上传文件。

谁能帮帮我？

Answer 1

终于知道怎么做了

首先生成图像blob和文件

import fs from 'fs'
import path from 'path'


const dummyImgData = fs.readFileSync(path.join(__dirname, '../../libs/dummy-img-2.jpeg'))
const fbParts = [
  new Blob([dummyImgData], {
    type: 'image/jpeg'
  }),
  ' Same way as you do with blob',
  new Uint16Array([999999999999999])
]

const fbImg = new File(fbParts, 'sample.png', {
  lastModified: new Date(2020, 1, 1),
  type: 'image/jpeg'
})

并将其分配给 $refs 对象后：

wrapper.vm.$refs = {
  photo: {
    files: [
      fbImg
    ]
  }
}

如何使用模拟来测试用笑话上传文件

How to use mocking for test uploading file with jest

vue.js

jestjs

axios

nuxt.js