If you already have a project created with Nuxt but without Jest configured, I'll show you how to do it.
π‘ My Nuxt.js version is
2.14.12
.
Steps
-
Install dependencies
npm i -D @vue/test-utils babel-core@^7.0.0-bridge.0 babel-jest jest vue-jest
-
Add command
test
inpackage.json
.
{ //... "scripts": { //... "test": "jest" } //... }
-
Add file
jest.config.js
in root directory
module.exports = { moduleNameMapper: { '^@/(.*)$': '<rootDir>/$1', '^~/(.*)$': '<rootDir>/$1', '^vue$': 'vue/dist/vue.common.js', }, moduleFileExtensions: ['js', 'vue', 'json'], transform: { '^.+\\.js$': 'babel-jest', '.*\\.(vue)$': 'vue-jest', }, collectCoverage: true, collectCoverageFrom: [ '<rootDir>/components/**/*.vue', '<rootDir>/pages/**/*.vue', ], }
-
Add file
.babelrc
in root directory
{ "env": { "test": { "presets": [ [ "@babel/preset-env", { "targets": { "node": "current" } } ] ] } } }
-
Create
test
directory in root directory
mkdir test
-
Write your first test of your component
/test/YourComponent.spec.js
import { mount } from '@vue/test-utils' import YourComponent from '@/components/YourComponent' describe('YourComponent', () => { test('is a Vue instance', () => { const wrapper = mount(YourComponent) expect(wrapper.vm).toBeTruthy() }) })
π‘ I recommend you to read:
Top comments (1)
if it isnt too much to ask could you add a more detailed example like how to test vuex actions getters mutations