Javascript vue jest路由器错误路由
我目前正在为我们的vue组件编写单元测试。我的问题是,如果一个测试产生了一个路由器Javascript vue jest路由器错误路由,javascript,vue.js,jestjs,vue-router,Javascript,Vue.js,Jestjs,Vue Router,我目前正在为我们的vue组件编写单元测试。我的问题是,如果一个测试产生了一个路由器$router.push,那么jest中的router对象仍将具有与之前测试产生的wrapper.vm.$route.name相同的路由 每次测试后,我都想尽一切办法重新设置,但都没有成功。也许你有个主意。这是我的密码: import { // @ts-ignore createLocalVue, RouterLinkStub, mount, enableAutoDestroy, } from '@vue/test
$router.push
,那么jest中的router对象仍将具有与之前测试产生的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');
});
});
});
为了在干净的环境中运行套装中的每个测试,您需要在每个测试之前创建包装器和路由器,并在每个测试之后销毁包装器 因此,与此相反:
beforeEach(() => {
wrapper = mountStore();
});
你需要这个:
beforeEach(() => {
const router = new VueRouter({
mode: "abstract"
});
wrapper = mountStore(router);
});
然后将新路由器传递给mountStore函数