36

のようなステートメントを含むコンポーネントがあります。そのコンポーネントをテストしたい場合、オブジェクトのthis.$route.fullPath値をどのようにモックすればよいですか?fullPath$route

4

12 に答える 12

47

一番上の答えには同意しません-$route問題なくモックできます。

一方、基本コンストラクターに vue-router を複数回インストールすると、問題が発生します。$routeおよび$router読み取り専用プロパティとして追加します。これにより、将来のテストでそれらを上書きすることができなくなります。

vue-test-utilsでこれを達成するには 2 つの方法があります。

mocks オプションで vue-router をモックする

const $route = {
    fullPath: 'full/path'
}
const wrapper = mount(ComponentWithRouter, { 
  mocks: {
    $route
  } 
})

wrapper.vm.$route.fullPath // 'full/path'

createLocalVue を使用して、Vue Router を安全にインストールすることもできます。

createLocalVueを使用したテストで vue-router を安全にインストールする

const localVue = createLocalVue()
localVue.use(VueRouter)
const routes = [
 {
   path: '/',
   component: Component
 }
]
const router = new VueRouter({
 routes
})
const wrapper = mount(ComponentWithRouter, { localVue, router })
expect(wrapper.vm.$route).to.be.an('object')
于 2017-06-18T20:43:32.437 に答える
3

私が見つけた最も簡単な方法は、localVueを使用することです

import { createLocalVue, mount } from '@vue/test-utils';
import VueRouter from 'vue-router';
import Vuex from 'vuex';

import ComponentName from '@/components/ComponentName.vue';
// Add store file if any getters is accessed
import store from '@/store/store';

describe('File name', () => {
  const localVue = createLocalVue();
  localVue.use(VueRouter);

  // Can also be replaced with route(router.js) file
  const routes = [
    {
      path: '/path',
      component: ComponentName,
      name: 'Route name'
    }
  ];

  const router = new VueRouter({ routes });

  // if needed
  router.push({
    name: 'Route name',
    params: {}
  });

  const wrapper = mount(ComponentName, {
    localVue,
    router,
    store
  });

  test('Method()', () => {
    wrapper.vm.methodName();

    expect(wrapper.vm.$route.path)
      .toEqual(routes[0].path);
  });
});

それが役に立てば幸い！！！

于 2018-10-13T16:44:31.203 に答える
0

私が見つけた最も簡単な方法は、$route をモックすることです。

it('renders $router.name', () => {
  const $route = {
    name: 'test name - avoriaz'
  }


 const wrapper = shallow(Component, {
    mocks: {
      $route
    }
  })
  expect(wrapper.text()).to.equal($route.name)
})
于 2018-09-06T08:51:03.633 に答える