Question

在我的组件中，我有一个将执行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路由称为

感谢您的反馈

Answer 1

您所做的事情可能会起作用，但是我认为这是错误的，并且还会导致您无法测试路由器。您要在组件中导入路由器：

import router from "@/router";

然后立即调用其push：

router.push("/home");

我不知道您如何确切地安装路由器，但是通常您会执行以下操作：

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

安装Vue插件。我敢打赌，您已经在这样做了（实际上，这种机制向您的组件公开了$route）。在该示例中，还将安装vuex存储和对vue-i18n的引用。

这将在所有组件中暴露一个$router成员。您无需导入路由器并直接调用其push，而可以从this以$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');

Answer 2

假设您已经正确设置了先决条件，并且类似于this

只需使用

it("should ... go to home page", async () => {
    const $route = {
      name: "home"
    }

  ...

  // router path '/home' to be called ?
  expect(wrapper.vm.$route.name).toBe($route.name)
});

Answer 3

没有问题，我说对了...而且我了解这。路由器使用情况

Vue test-utils如何测试router.push（）

3 个答案: