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'))
            })
        })
    })
})