Testing Vue components using Jest

Let's start by testing the Header component. Since it depends on the Vuex store which, in its turn, highly depends on Firebase, we must do the exact same thing we just did to test our Vuex actions—mock the Firebase application before injecting the store into the tested component. Start by creating a spec file HeaderComponent.spec.js and paste the following to its import section:

import Vue from 'vue'
import mockFirebaseApp from '~/__mocks__/firebaseAppMock'
jest.mock('~/firebase', () => mockFirebaseApp)
import store from '~/store'
import HeaderComponent from '~/components/common/HeaderComponent'

Note that we first mock the Firebase application and then import our store. Now, to be able to properly test our component with the mocked store, we need to inject the store into it. The best way to do that is to create a Vue instance with the HeaderComponent in it:

// HeaderComponent.spec.js
let $mounted

beforeEach(() => {
  $mounted = new Vue({
    template...