You are on page 1of 2

1.

Install Jest and Vue Test Utils:

npm install --save-dev jest vue-jest @vue/test-utils

2. Create a jest.config.js file at the root of your project and add the following code:

module.exports = {
moduleFileExtensions: [
'js',
'json',
// tell Jest to handle `*.vue` files
'vue'
],
transform: {
// process `*.vue` files with `vue-jest`
'.*\\.(vue)$': 'vue-jest',
// process js files with `babel-jest`
'^.+\\.js$': '<rootDir>/node_modules/babel-jest'
}
}

3. Create a setup.js file at the folder tests/ of your project and add the following code:

import Vue from 'vue'


import { config } from '@vue/test-utils'
import Vuetify from "vuetify";

Vue.use(Vuetify);

// set Vue.config.productionTip to false to suppress Vue startup logs


Vue.config.productionTip = false

// set the config.mocks["$store"] to a mock store


config.mocks['$store'] = {
// your mock store implementation
}

4. In your package.json file, add the following scripts:

"scripts": {
"test": "jest"
"test:unit": "vue-cli-service test:unit
--setupTestFrameworkScriptFile=./tests/setup.js",
}

5. Create a test file (e.g., MyComponent.spec.js) in your tests/unit directory, and add the
following code:

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


import MyComponent from '@/components/MyComponent.vue'

describe('MyComponent', () => {
it('renders correctly', () => {
const mockData = {
// your mock data here
}
const wrapper = shallowMount(MyComponent, {
propsData: mockData
})
expect(wrapper.html()).toMatchSnapshot()
})
})

6. Run the test command to execute the tests:

npm run test:unit

This is just a basic example, but you can find more information on how to use Jest and
Testing Library to test Vue 2 applications in the official documentation:

● Jest: https://jestjs.io/docs/en/getting-started
● Testing Library: https://testing-library.com/docs/vue-testing-library/intro

You might also like