Practical week 14: Testing
Practical week 14: Testing
Navigate to frontend's root directory:
> cd frontend
And run command:
> npm install
> npm install jest --save-dev
> npm install babel-jest --save-dev
> npm install @vue/test-utils --save-dev
> npm install @vue/cli-plugin-unit-jest --save-dev
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[\\\\/])/']
}
In package.json
's scripts
section add:
"test" : "jest"
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)
})
});
npm run test
you should see:
PASS tests/unit/Header.spec.js
Header
√ renders the correct date (12ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 3.019s
Ran all test suites.