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...