Vue Test Utils and Jest: how to write simple unit tests for Vue components

Edd Yerburgh
Sep 8, 2017 · 5 min read

Setup

git clone https://github.com/eddyerburgh/vue-unit-test-starter.git
cd vue-unit-test-starter && npm install
npm run dev
import someModule from '../../../../../src/components/someModule'
import someModule from '@/components/someModule'

Jest

npm install --save-dev jest
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
}
}
npm install --save-dev babel-jest vue-jest
"unit": "jest"
npm run unit

Vue Test Utils

npm install --save-dev @vue/test-utils
npm run unit

Snapshot testing

npm install --save-dev vue-server-renderer jest-serializer-vue
"snapshotSerializers": [
"<rootDir>/node_modules/jest-serializer-vue"
]
npm run unit
// Jest Snapshot v1, https://goo.gl/fbAQLPexports[`List.vue has same HTML structure 1`] = `
<ul>
<li>
list item one
</li>
<li>
list item two
</li>
</ul>
`;

Conclusion

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Edd Yerburgh

Written by

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead