Question

我想在Vuejs上创建一个简单的Test。目的是单击路由器链接，并证明路径名正确。这是代码：

    describe("Menu.vue", () => {
  const localVue = createLocalVue();
  localVue.use(VueRouter);

  test("click on first routes to ./first", async () => {
    const wrapper = shallowMount(Menu, {
      localVue,
      router,
      stubs: {
        RouterLink: RouterLinkStub,

        First
      }
    });
    await wrapper.find("#testFirst").trigger("click");
    await Vue.nextTick();
    expect(wrapper.find("#testFirst").exists()).toBe(true);

    await flushPromises();
    expect(location.pathname).toBe("/first")
  });
});

主要组件是具有路由器链接ID为testFirst的Menu.vue，该错误来自期望失败的最后一行。另一个组件名为first.vue。第一个期望通过，证明#testFirst存在。
它期望“ / first”并收到“ /”
谢谢

Answer 1

您可以测试而不是检查位置路径名 expect(wrapper.vm.$route.push).toHaveBeenCalledWith({YOUR ROUTE})

为此，您必须模拟在您的componenet创建包装器时可以在存根中执行的$ route推送方法。

mocks: {
    $router:{
       push:jest.fn()
    }
}

vue测试网址在单击的按钮上失败

1 个答案: