Test fails when <router-view></router-view> is an element inside the component

For the following component the test fails but succeeds when i remove the <router-view></router-view>

Teams.vue

<template>
    <div class="teams card">
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Teams</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="team in teams">
                        <td>
                            <span v-show="!team.editing">{{team.name}}</span>
                            <input type="text" class="form-control" v-model="team.name" v-show="team.editing" />
                        </td>
                        <td>
                            <router-link :to="modalFor(team)">Edit</router-link>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
  import { Team } from '../../../models/team'
  import Modal from '../../../components/Modal'
  export default {
    components: {Modal},
    name: 'teams',
    mounted () {
      // load all teams
      Team.all().then(teams => {
        // disable editing mode for all teams
        teams.forEach(team => { team.editing = false })
        this.teams = teams
      })
    },
    data () {
      return {
        teams: [],
      }
    },
    methods: {
          modalFor (team) {
              return '/admin/teams/' + team.id
      }
    }
  }

Teams.spec.js

import Teams from '@/pages/dashboard/admin/Teams'
import { mount } from 'avoriaz'

describe('Teams.vue', () => {
  it('should render correct contents', () => {
    const wrapper = mount(Teams)
    const tableHeader = wrapper.find('.table tr th')[0]
    expect(tableHeader.text()).to.equal('Teams')
  })
})

The test result with the <router-view> inside the component:

The test result without the <router-view>

[eddyerburgh]

router-view is injected as a global component when you Vue.use() vue-router.

You need to register a mock global component:

// mock component
const routerView = {
  name: 'router-view',
  render: h => h('div'),
};

// register mock component
Vue.component('router-view', routerView);

[eddyerburgh]

You can mock $route 😄

describe('Fixed.vue', () => {
  it('is a component', () => {
    const $route = {name: 'some name'}
    Vue.component('router-view', routerView)

    const wrapper = shallow(Fixed, {
      globals: { $route }
    })
    expect(wrapper.isVueComponent).toBe(true)
  })
})

globals adds properties to the Vue prototype, so they are accessible inside each vm.