DEV Community

Cover image for Setting Up Unit Tests in VueJS + Jest
Francisco Bressa
Francisco Bressa

Posted on

Setting Up Unit Tests in VueJS + Jest

1. Add Jest to your project
Run the following command inside your project directory

vue add unit-jest
Enter fullscreen mode Exit fullscreen mode

2. Scripts
To run the tests add the following commands to your package.json Scripts

"test:unit": "vue-cli-service test:unit",
"test:watchAll": "jest --verbose --watchAll",
Enter fullscreen mode Exit fullscreen mode

3. Configure the extensions your modules will use
Add in your package.json

"jest": {
  "moduleFileExtensions": [
    "js",
    "vue"
  ],
}
Enter fullscreen mode Exit fullscreen mode

4. Mapping Paths
Add the mappings you need in the moduleNameMapper option in your jest.config.js

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  moduleNameMapper: {
    "@themeConfig(.*)": "<rootDir>/themeConfig.js",
    "@core/(.*)": "<rootDir>/src/@core/$1",
    "^@/(.*)$": "<rootDir>/src/$1"
  }
}
Enter fullscreen mode Exit fullscreen mode

5. Ignore Patterns
In your jest.config.js the transformIgnorePatterns option will ignore every file type that matches the regexp pattern. Like for example:

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',``
  transformIgnorePatterns: ['/node_modules/(?!vee-validate/dist/rules)'],
}
Enter fullscreen mode Exit fullscreen mode

Discussion (0)