3. Create Jest config

In the frontend root create new file called: jest.config.js

With this content:

module.exports = {

moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],

transform: {

'^.+\\.vue$': 'vue-jest',

'.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':

'jest-transform-stub',

'^.+\\.jsx?$': 'babel-jest'

},

"collectCoverage": true,

"collectCoverageFrom": ["**/src/components/*.{js,vue}", "!**/node_modules/**"],

moduleNameMapper: {

'^@/(.*)$': '<rootDir>/src/$1'

},

snapshotSerializers: ['jest-serializer-vue'],

testMatch: [

'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'

],

testURL: 'http://localhost/',

transformIgnorePatterns: ['/node_modules(?![\\\\/]vue-awesome[\\\\/])/']

}

5. Prepare dummy test

In frontend directory create directory tests/unit

Inside that directory create Header.spec.js file

With this content:

// Import the mount() method from the test utils

// and the component you want to test

import { mount } from '@vue/test-utils'

import Header from "../../src/components/Header.vue";

describe('Header', () => {

// Now mount the component and you have the wrapper

const wrapper = mount(Header)

// Check that this component properly displays today's date

it('renders the correct date', () => {

let today = new Date();

let date = today.getDate() < 10 ? `0${today.getDate()}` : today.getDate();

expect(wrapper.html()).toContain(date)

})

});