vue jest路由器路由错误答案

【问题标题】：vue jest router wrong routevue jest路由器路由错误
【发布时间】：2020-06-28 08:51:57
【问题描述】：

我目前正在为我们的 vue 组件编写单元测试。我的问题是，如果测试导致路由器$router.push，则开玩笑中的路由器对象仍将具有与之前测试导致的wrapper.vm.$route.name 相同的路由。

我尝试了所有我能想到的在每次测试后重置它，但没有成功。也许你有一个想法。这是我的代码：

import {
// @ts-ignore
createLocalVue, RouterLinkStub, mount, enableAutoDestroy,
} from '@vue/test-utils';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import Component from '../../../components/account/Password.vue';
import routes from '../../../router/index';
import CustomerModuleStore, { CustomerModule } from '../../../store/modules/CustomerModule';
import Constants from '../../../constants';

jest.mock('../../../store/modules/CustomerModule');

const localVue = createLocalVue();
localVue.use(Vuex);
localVue.use(VueRouter);

let customerModule: CustomerModuleStore;

enableAutoDestroy(afterEach);

describe('Password.vue', () => {
    const router = new VueRouter({
        routes: routes.options.routes,
    });

    function mountStore() {
        const store = new Vuex.Store({});
        customerModule = new CustomerModule({ store, name: 'customer' });
        customerModule.changePassword = jest.fn().mockImplementation(() => Promise.resolve());

        return mount(Component, {
            provide: {
                customerModule,
            },
            localVue,
            store,
            router,
            stubs: { 'router-link': RouterLinkStub },
            attachToDocument: true,
        });
    }

    describe('Test component initialisation', () => {
        let wrapper;

        beforeEach(() => {
            wrapper = mountStore();
        });

        it('is a Vue instance', () => {
            expect(wrapper.isVueInstance()).toBeTruthy();
        });

        it('should render with the router', () => {
            expect(wrapper.element).toBeDefined();
        });
    });

    it('redirects to correct route', async () => {
        const submitButton = wrapper.find({ ref: 'submitButton' });
        expect(submitButton.attributes().disabled).toBe('disabled');

        // method content excluded for readability (fills inputs and triggers change event)
        fillFormWithValidData(wrapper);

        await wrapper.vm.$nextTick();

        submitButton.trigger('click');

        await wrapper.vm.$nextTick();

        // this.$router.push({ name: 'Home' }); got executed in component
        expect(wrapper.vm.$route.name).toBe('Home');
    });

    describe('Test error response functionality', () => {
        let wrapper;

        beforeEach(() => {
            wrapper = mountStore();
        });

        test('button is enabled if all data is valid by default', async () => {
            const submitButton = wrapper.find({ ref: 'submitButton' });
            expect(submitButton.attributes().disabled).toBe('disabled');

            // method content excluded for readability (fills inputs and triggers change event)
            fillFormWithValidData(wrapper);

            await wrapper.vm.$nextTick();

            submitButton.trigger('click');

            await wrapper.vm.$nextTick();

            // this.$router.push({ name: 'Home' }); did not get executed in component
            // but test fails since $route.name is still 'Home'
            expect(wrapper.vm.$route.name).not.toBe('Home');
        });
    });
});

【问题讨论】：

标签： javascript vue.js jestjs vue-router

【解决方案1】：

为了在干净的环境中从套装运行每个测试，您需要在每次测试之前创建包装器和路由器，并在每次测试后销毁包装器。

所以不要这样：

beforeEach(() => {
  wrapper = mountStore();
});

你需要这个：

beforeEach(() => {
  const router = new VueRouter({
    mode: "abstract"
  });
  wrapper = mountStore(router);
});

然后你将你的新路由器传递给 mountStore 函数

【讨论】：