Vue test-utils 如何测试 router.push()

在我的组件中，我有一个方法将执行router.push()

import router from "@/router";
// ...
export default {
  // ...
  methods: {
    closeAlert: function() {
      if (this.msgTypeContactForm == "success") {
        router.push("/home");
      } else {
        return;
      }
    },
    // ....
  }
}

我想测试一下...

我写了以下规格..

it("should ... go to home page", async () => {
    // given
    const $route = {
      name: "home"
    },
    options = {
      ...
      mocks: {
        $route
      }
    };
    wrapper = mount(ContactForm, options);
    const closeBtn = wrapper.find(".v-alert__dismissible");
    closeBtn.trigger("click");
    await wrapper.vm.$nextTick();
    expect(alert.attributes().style).toBe("display: none;")
    // router path '/home' to be called ?
  });

1 - 我收到错误

console.error node_modules/@vue/test-utils/dist/vue-test-utils.js:15
[vue-test-utils]: could not overwrite property $route, this is usually caused by a plugin that has added the property asa read-only value

2 - 我应该如何编写expect()以确保已调用此/home路由

感谢您的反馈

您正在做的事情碰巧有效，但我认为是错误的，并且也会给您测试路由器带来问题。您正在组件中导入路由器：

import router from "@/router";

然后调用它的push马上：

router.push("/home");

我不知道你到底是如何安装路由器的，但通常你会这样做：

new Vue({
  router,
  store,
  i18n,
}).$mount('#app');

安装 Vue 插件。我打赌你已经在这样做了（事实上，这个机制暴露了$route到你的组件）。在该示例中，还安装了 vuex 商店和对 vue-i18n 的引用。

这将暴露一个$router成员于你所有的组件。而不是导入路由器并调用它push直接，你可以从this as $router:

this.$router.push("/home");

现在，这使得测试变得更容易，因为在测试时，您可以通过mocks财产，就像你正在做的那样$route已经：

  const push = jest.fn();
  const $router = {
    push: jest.fn(),
  }
  ...
  mocks: {
    $route,
    $router,
  }

然后，在你的测试中，你断言反对push被称为：

  expect(push).toHaveBeenCalledWith('/the-desired-path');