Как тестировать VueJS watcher на $route

Question

Я тестирую компонент Single File, который использует Vue Router для наблюдения за $route. Проблема в том, что я не могу заставить тест изменить и маршрут, и вызвать функцию наблюдателя.

Тестовый файл:

import { createLocalVue, shallow } from 'vue-test-utils';

import Vue from 'vue';
import Vuex from 'vuex';
const localVue = createLocalVue();
localVue.use(Vuex);

const $route = {
  path: '/my/path',
  query: { uuid: 'abc' },
}

wrapper = shallow({
  localVue,
  store,
  mocks: {
   $route,
  }
});

it('should call action when route changes', () => {
    // ensure jest has a clean state for this mocked func
    expect(actions['myVuexAction']).not.toHaveBeenCalled();
    vm.$set($route.query, 'uuid', 'def');
    //vm.$router.replace(/my/path?uuid=def') // tried when installing actual router
    //vm.$route.query.uuid = 'def'; // tried
    //vm.$route = { query: { uuid: 'def'} }; // tried
    expect(actions['myVuexAction']).toHaveBeenLastCalledWith({ key: true });
});

Мой метод часов в SFC:

  watch: {
    $route() {
      this.myVuexAction({ key: true });
    },
  },

Как вы смоделируете маршрутизатор таким образом, что вы можете наблюдать за ним и проверять, работает ли метод watch, как вы ожидаете?

Answer 1

Способ сделать это на самом деле заключается в использовании метода-оболочки vue-test-utils, setData,

wrapper.setData({ $route: { query: { uuid: 'def'} } });

Answer 2

Протестировано с vue@2.6.11 а также vue-router@3.1.3.

Я проверил как VueRouter инициализирует $route а также $routerи воспроизвел это в моем тесте. Следующее работает без использованияVueRouter напрямую:

const localVue = createLocalVue();

// Mock $route
const $routeWrapper = {
    $route: null,
};
localVue.util.defineReactive($routeWrapper, '$route', {
    params: {
        step,
    },
});
Object.defineProperty(localVue.prototype, '$route', {
    get() { return $routeWrapper.$route; },
});

// Mock $router
const $routerPushStub = sinon.stub();
localVue.prototype.$router = { push: $routerPushStub };

const wrapper = shallowMount(TestComponent, {
    localVue,
});

Обновление $route всегда следует выполнять заменой всего объекта, это единственный способ работы без использования глубокого наблюдателя на $route а также способ VueRouter ведет себя:

$routeWrapper.$route = { params: { step: 1 } };
await vm.wrapper.$nextTick(); 

Источник: install.js

Answer 3

Вот как я тестирую наблюдение за изменением маршрута, которое добавляет текущее имя маршрута в качестве класса css в мой компонент приложения:

import VueRouter from 'vue-router'
import { shallowMount, createLocalVue } from '@vue/test-utils'

import MyApp from './MyApp'

describe('MyApp', () => {
  it('adds current route name to css classes on route change', () => {
    // arrange
    const localVue = createLocalVue()
    localVue.use(VueRouter)
    const router = new VueRouter({ routes: [{path: '/my-new-route', name: 'my-new-route'}] })
    const wrapper = shallowMount(MyApp, { localVue, router })

    // act
    router.push({ name: 'my-new-route' })

    // assert
    expect(wrapper.find('.my-app').classes()).toContain('my-new-route')
  })
})

Answer 4

Это работает для меня

      let $route = {
  name: 'any-route',
};

Мы определили маршрут $ и вызвали его как

        wrapper = mount(YourComponent, {
    mocks: {
      $route,
    },
  });

и мой компонент такой

        @Watch('$route', { deep: true, immediate: true, })
  async onRouteChange(val: Route) {
    if (val.name === 'my-route') {
      await this.getDocumentByUrl();
      await this.allDocuments();
    }
   };

pd: я использую машинописный текст, но он работает с другим форматом

и наконец мой тест

      it('my test', ()=>{
    const getDocumentByUrl = jest.spyOn(wrapper.vm, 'getDocumentByUrl');
    const allDocuments = jest.spyOn(wrapper.vm, 'allDocuments');
    wrapper.vm.$route.name = 'my-route';
    await flushPromises();
    expect(getDocumentByUrl).toHaveBeenCalled();
    expect(allDocuments).toHaveBeenCalled();
})