Vue单元测试实战: 使用@vue/test-utils测试文件上传

使用 @vue/test-utils 对文件上传功能进行单元测试

本文将介绍如何使用 @vue/test-utils 和 axios-mock-adapter 对 Vue 组件中的文件上传功能进行单元测试，以 upLoadImg 函数为例：javascriptimport request from '@/utils/request'

export function upLoadImg (data) { return request({ url: '/shopcms/file/getUrl', method: 'POST', data: data })}

1. 安装依赖

首先，确保安装了 @vue/test-utils 和 axios-mock-adapter:bashnpm install @vue/test-utils axios-mock-adapter --save-dev

2. 创建单元测试文件

创建一个名为 uploadImg.spec.js 的单元测试文件：javascriptimport { mount } from '@vue/test-utils'import { upLoadImg } from '@/api'

import axios from 'axios'import MockAdapter from 'axios-mock-adapter'

describe('upLoadImg', () => { let mock

beforeEach(() => { mock = new MockAdapter(axios) })

afterEach(() => { mock.reset() })

it('should make a POST request to '/shopcms/file/getUrl'', async () => { const data = { image: 'image data' }

// 模拟响应    mock.onPost('/shopcms/file/getUrl', data).reply(200, { url: 'http://example.com/image.jpg' })

// 调用函数    const response = await upLoadImg(data)

// 断言请求    expect(mock.history.post.length).toBe(1)    expect(mock.history.post[0].url).toBe('/shopcms/file/getUrl')    expect(mock.history.post[0].data).toBe(JSON.stringify(data))

// 断言响应    expect(response).toEqual({ url: 'http://example.com/image.jpg' })  })})

3. 测试代码解释

• 我们使用 axios-mock-adapter 来模拟 axios 请求，并使用 MockAdapter 断言请求的 URL、数据和返回值是否正确。- beforeEach 中创建 MockAdapter 实例，afterEach 中重置模拟。- 测试用例中，我们模拟了 /shopcms/file/getUrl 接口的 POST 请求，并断言了请求和响应数据。

4. 运行测试

使用以下命令运行单元测试：bashnpm run test:unit

如果一切正常，单元测试应该会通过。

总结

通过 @vue/test-utils 和 axios-mock-adapter，我们可以轻松地对 Vue 组件中的文件上传功能进行单元测试。