Stub $route in Vue unit tests

In this article I’ll show you four ways to stub $route in Vue unit tests. One naive approach, one enlightened, and one using Vue Test Utils.

Note: We won’t explore basic unit testing concepts. If you aren’t familiar with unit testing Vue components, check out How to unit test Vue components

Stubbing Vue Router properties

Vue Router properties can be tricky to test. When you install Vue Router on a Vue constructor, they are added as read-only properties to the Vue constructor prototype. This can be very confusing if you aren’t aware of the fact!

So when you want to stub Vue Router properties, you need to avoid installing Vue Router on the base Vue constructor. You can do that by using Vue Test Utils.

Stub $route with vue-test-utils

Vue Test Utils is the official Vue test library. It contains helper functions for testing Vue components.

Imagine you have a Vue Single File Component that renders the $route.name:

<template>
  <div></div>
</template>

<script>
export default {
  name: 'test-component'
}
</script>

You could test this using the Vue Test Utils mocks mounting option. mock adds properties to the Vue prototype for the current component you’re testing, and it won’t affect future tests.

Here’s an example:

import { expect } from 'chai'
import { shallowMount } from 'vue-test-utils'
import Component from './component.vue'

it('renders $router.name', () => {
  const $route = {
    name: 'test name - avoriaz'
  }
  const wrapper = shallow(Component, {
    mocks: {
      $route
    }
  })
  expect(wrapper.text()).to.equal($route.name)
})

If you have any questions, leave a comment.