VueJS HTTP测试-模拟未反映在组件呈现中

Question

我正在尝试完成一些基于渲染输出的轻量级测试，主要关注初始负载和用户交互。

我正在为登录组件进行HTTP测试。正如您所期望的那样，它是一个包含电子邮件字段、密码和按钮的基本组件。当用户单击按钮时，它调用一个方法，该方法对端点进行axios调用。我正在处理的具体测试用例是"无效提交"。在这个测试中，我模拟一个用户简单地点击提交按钮而不输入任何信息，期望应用程序输出错误。

我首先尝试沿着vue-test-utils路由，触发一个按钮点击，并使用Jest的spyOn函数来观察axios.post请求。尽管各种尝试延迟使用await和各种其他建议的Promise方法，没有任何渲染和spyOn没有报告任何形式的axios调用，所以测试失败，尽管遵循文档。

我对Vue HTTP测试模式的研究引导我进行模拟测试。我使用axios-mock-adapter与expect()案例检查axios调用的模拟测试取得了一些成功，但是对渲染本身的任何类型的检查都会失败。模拟测试对vdom没有影响，尽管将mount配置为attachTo: document.body，并尝试使用承诺延迟检查。

describe("when API call is unsuccessful", () => {
it('displays error messages', async () => {  
let spy = jest.spyOn(axios, "post");
let result = null;
mock.onPost(url).reply(422, mockResult);
await axios.post(url).then(function (response) {
result = response
}).catch((error) => {
result = error.response.data
});
expect(spy).toHaveBeenCalledTimes(1) <-- Passes
expect(result).toEqual(mockResult) <-- Passes
expect(wrapper.get('.error--text')) <-- Fails
})
})

为了试验&错误，我甚至在catch函数中添加了一行，将wrapper.vm.errors数据属性设置为result变量(这是组件在请求失败后所做的事情)，然后dom检查通过。

我错过了什么吗?是否有一种清晰、简单的方法来模拟HTTP请求并相应地更新我刚刚丢失的组件?

Answer 1

我在这方面有了一个小小的突破。我切换到Moxios，并成功地模拟了影响组件及其渲染的HTTP请求。

login.spec.js:

import { mount, createLocalVue } from '@vue/test-utils';
import VueCompositionApi from '@vue/composition-api'
import axios from 'axios';
import Vuetify from "vuetify";
import moxios from 'moxios';
import expect from 'expect';

beforeEach(() => {
moxios.install()
const localVue = createLocalVue();
localVue.use(VueCompositionApi);
vuetify = new Vuetify();
jest.spyOn(axios, 'post').mockResolvedValue(mockResult)
wrapper = mount(localVue.component('login', require('../../resources/js/components/Login.vue').default), {
vuetify,
attachTo: document.body
});
})
afterEach(function () {
moxios.uninstall()
})
afterAll(() => {
wrapper.destroy()
})
describe("when API call is unsuccessful", () => {
it('displays error messages', (done) => {  
wrapper.find('button').trigger('click')
moxios.wait(function () {
let request = moxios.requests.mostRecent()
request.respondWith({
status: 422,
response: mockResult
}).then(function(response){
done()
expect(response).rejects
expect(wrapper.get('.error--text'))
})
})
})
})