web-dev-qa-db-ja.com

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-この/ homeルートが呼び出されたことを確認するためのexpect()の記述方法

フィードバックをありがとう

5
user762579

前提条件を正しく設定し、 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)
});
0
Ru Chern Chong