Vue test-utils, как проверить router.push () - PullRequest
Новая
       21

Vue test-utils, как проверить router.push ()

0 голосов
/ 14 ноября 2018

В моем компоненте у меня есть метод, который будет выполнять 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 - Как мне написать write (), чтобы быть уверенным, что этот / home маршрут был назван

спасибо за отзыв

Ответы [ 3 ]

0 голосов
/ 14 ноября 2018

Предполагая, что вы настроили предварительные требования правильно и аналогично 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 голосов
/ 16 ноября 2018

Нет проблем, я понял это правильно ... и я понимаю, что это лучше. Использование маршрутизатора $

0 голосов
/ 14 ноября 2018

Вы делаете что-то, что случается с работой, но я считаю, что это неправильно, а также вызывает проблемы с тестированием маршрутизатора.Вы импортируете маршрутизатор в свой компонент: 

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');
...