小编Zha*_*ave的帖子

如何使用“@vue/test-utils”测试 VueRouter 的 beforeRouteEnter?

我正在尝试测试处理表单逻辑的“容器”组件。它使用vue-routervuex商店派遣行动,以获得一个表格的详细信息。

我有以下未按预期工作的单元代码:

it('On route enter, it should dispatch an action to fetch form details', () => {
  const getFormDetails = sinon.stub();
  const store = new Vuex.Store({
    actions: { getFormDetails }
  });

  const wrapper = shallowMount(MyComponent, { store });
  wrapper.vm.$options.beforeRouteEnter[0]();
  expect(getFormDetails.called).to.be.true;
});
Run Code Online (Sandbox Code Playgroud)

使用以下组件(删除所有内容,因为我认为它不相关(希望如此):

export default {
  async beforeRouteEnter(to, from, next) {
    await store.dispatch('getFormDetails');
    next();
  }
};
Run Code Online (Sandbox Code Playgroud)

我收到以下断言错误:

AssertionError: expected false to be true

我猜这是因为我没有在测试中安装路由器和localVue。我尝试按照步骤操作,但似乎无法让它调用beforeRouteEnter.

理想情况下,我希望为路由器注入一个起始路径,并对路由变化进行不同的测试。对于我的用例,我想根据基于路由器的路径的组件注入不同的道具/调度不同的动作。

我对 Vue 很陌生,如果我遗漏了一些非常明显的东西,我深表歉意,并提前感谢您的帮助!

unit-testing vue.js vue-router vuex vue-test-utils

9
推荐指数
1
解决办法
2037
查看次数

标签 统计

unit-testing ×1

vue-router ×1

vue-test-utils ×1

vue.js ×1

vuex ×1