unit-testing - 如何使用 '@vue/test-utils' 测试 VueRouter 的 beforeRouteEnter ？

Question

我正在尝试测试处理表单逻辑的“容器”组件。它正在使用 vue-router和 vuex store 以调度操作以获取表单详细信息。

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

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

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

export default {
  async beforeRouteEnter(to, from, next) {
    await store.dispatch('getFormDetails');
    next();
  }
};

我收到以下断言错误:
AssertionError: expected false to be true
我猜这是因为我没有在测试中安装路由器和 localVue .我尝试按照这些步骤操作，但似乎无法调用 beforeRouteEnter .

理想情况下，我很想给路由器注入(inject)一个起始路径，并对路由变化进行不同的测试。对于我的用例，我想基于路由器的路径基于组件注入(inject)不同的 Prop /调度不同的 Action 。

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

Answer 1

请参阅此文档:https://lmiller1990.github.io/vue-testing-handbook/vue-router.html#component-guards

根据文档，您的测试应如下所示:

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

  const wrapper = shallowMount(MyComponent, { store });
  const next = sinon.stub()

  MyComponent.beforeRouteEnter.call(wrapper.vm, undefined, undefined, next)

  await wrapper.vm.$nextTick()

  expect(getFormDetails.called).to.be.true;
  expect(next.called).to.be.true
});