vue jest路由器路由错误

Posted 2023-02-22

【中文标题】vue jest路由器路由错误

【英文标题】：vue jest router wrong route

【发布时间】：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');
        );
    );
);

【参考方案1】：

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

所以不要这样：

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

你需要这个：

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

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