Vue testing with jest: $route is always undefined

Question

I've tried a lot of things but $route seems to always be undefined and I have this error on shallowMount: TypeError: Cannot read property 'params' of undefined.

In my component, I want to check the params of the $route but it is always undefined. I've looked the documentation and mocked the $route to set it but it seems like the $route is not mocked. I've also tried using localVue.use(VueRouter), thinking that it would set $route but it didn't. Does anyone have an idea why the following doesn't work in both cases?

my-component.ts

@Component
export default class MyComponent extends Vue {
  get organisationId() {
    return this.$route.params.organisationId;
  }
}

I've tried the 2 following tests with the solutions I've talked about:

my-component.spec.ts

import { createLocalVue, shallowMount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';
import router from '@/router';

const localVue = createLocalVue();

describe('MyComponent', () => {
  let cmp: any;

  beforeEach(() => {
    cmp  = shallowMount(MyComponent, {
      localVue,
      router,
      mocks: {
        $route: {
          params: {
            id: 'id'
          }
        }
      }
    });
  });

  it('Should render a Vue instance', () => {
    expect.assertions(1);
    expect(cmp.isVueInstance()).toBeTruthy();
  });
});

my-component.spec.ts

import { createLocalVue, shallowMount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';

const localVue = createLocalVue();

describe('MyComponent', () => {
  let cmp: any;
  localVue.use(VueRouter);
  const router = new VueRouter();

  beforeEach(() => {
    cmp  = shallowMount(MyComponent, {
      localVue,
      router
    });
  });

  it('Should render a Vue instance', () => {
    expect.assertions(1);
    expect(cmp.isVueInstance()).toBeTruthy();
  });
});

Answer 1

I know I'm answering my question 2 years later but I thought it could help people with the same issue so here is how I've fixed it:

In my component, I used a directive but I forgot to use it in my localVue instance. The error didn't lead me to that at all. When you use a directive in your component, you should add

import directive from '@/directives/my-directive';

const localVue = createLocalVue();
localVue.directive('myDirective', directive);