如何在 $route 上对 VueJS 观察者进行单元测试

Question

我正在测试一个使用 vue 路由器来监视 $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 });
});

我在证监会中的观察方法：

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

您如何以一种可以观察路由器并测试观察方法是否按预期工作的方式模拟路由器？

Answer 1

实际上做到这一点的方法是使用 vue-test-utils 包装方法，setData。

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