unit-testing - vue-router 在运行测试期间不会重置

Question

目前我正在为 Vue.js 应用程序编写测试并遇到问题:如果有一些路由测试，href 中的路径在每次下一个测试中根据之前的测试进行修改。

例如，如果在第一次测试中，我模拟单击带有 href='document/123' 的链接。并检查 vm.$router.history.path ，它将正确显示 document/123 ，但如果在下一个测试中我会尝试做同样的事情，vm.$router.history.path将显示 document/document/123并在每次下一次测试时继续在路径中添加“文档”。

很奇怪，看起来像 router在 describe 中的所有测试期间保持存在阻止，即使我有 beforeEach钩子(Hook)，我重新初始化 Vue 并使用所有插件以及 Vue-router 和 afterEach钩我打电话$destroy() Vue 实例上的方法。

有没有办法修改或重置vm.$router.history afterEach 中的对象或其属性钩子(Hook)还是我错过了其他东西？

这是测试的代码:

import Vue from 'vue'
import Search from '../../../src/Search.vue';
import router from '../../../src/router';

describe('Search', () => {
   let vm;

   beforeEach((done) => {
     const container = document.createElement('div');
     vm = new Vue({
        router,
        render: h => h(Search),
     }).$mount(container);
     done();
   });

   afterEach((done) => {
     vm.$destroy();
     done();
   });

   it('should navigate to single page when user clicks on "More" button', (done) => {
     let moreButton = vm.$el.querySelector('.btn');
     let clickEvent = new window.Event('click');
     moreButton.dispatchEvent(clickEvent);
     Vue.nextTick().then(() => {
       expect(vm.$router.history.current.path).to.equal('/document/1548'); // passes
       done();
     });
   });

  it('should navigate to single page when user clicks on document title', (done) => {
     let link = vm.$el.querySelector('h6 a');
     let clickEvent = new window.Event('click');
     link.dispatchEvent(clickEvent);
     Vue.nextTick().then(() => {
       expect(vm.$router.history.current.path).to.equal('/document/1548'); // fails, actual path is /document/document/1548
       done();
     });
   });
});

Answer 1

老问题，但如果其他人遇到同样的问题，解决方案在这里描述:https://github.com/vuejs/vue-test-utils/issues/1681
专门将测试套件中的“模式”参数更改为“抽象”。否则路由将基于在测试之间保留的 window.location。 'abstract' 将导航配置为基于用 vue-router 的新实例实例化的'stack'。
在本地，我必须参数化我的 vue-router 实例化，以便在生产模式下使用“历史”，并且在运行测试套件时使用“抽象”。