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

Posted 2023-02-16

【中文标题】vue-router 在运行测试期间不会重置

【英文标题】：vue-router doesn't reset during running tests

【发布时间】：2018-01-09 07:36:28

【问题描述】：

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

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

这很奇怪，看起来 router 在 describe 块中的所有测试期间仍然存在，即使我有 beforeEach 钩子，我在其中重新初始化 Vue 并使用所有插件Vue-router 和 afterEach 钩子我在 Vue 实例上调用 $destroy() 方法。

有什么方法可以修改或重置vm.$router.history 对象或其在afterEach 钩子中的属性，还是我缺少其他东西？

这是测试代码：

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();
     );
   );
);

【问题讨论】：

找到了一个小解决方法，但它看起来不是最好的解决方案：在afterEach 或在每次测试结束时使用vm.$router.push('/') 回到“家”

【参考方案1】：

老问题，但如果其他人遇到同样的问题，解决方案在这里描述：https://github.com/vuejs/vue-test-utils/issues/1681

将测试套件中的“mode”参数具体更改为“abstract”。否则，路由将基于在测试之间保留的 window.location。 'abstract' 将导航配置为基于使用 vue-router 的新实例实例化的 'stack'。

我必须在本地参数化我的 vue-router 实例化，以便在生产模式下使用“历史”，并在运行测试套件时使用“抽象”。