DEV Community

Cover image for Configurando Teste Unitário no VueJS + Jest
Francisco Bressa
Francisco Bressa

Posted on

Configurando Teste Unitário no VueJS + Jest

1. Adicione Jest ao seu projeto
Rode o seguinte comando dentro do diretório de seu projeto

vue add unit-jest
Enter fullscreen mode Exit fullscreen mode

2. Scripts
Para rodar os testes adicione os seguintes comandos nos Scripts de seu package.json

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

3. Configure as Extensões que seus módulos usarão
Adicione em seu package.json

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

4. Mapear os caminhos
Adicione os mapeamentos que precisar na opção moduleNameMapper em seu 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. Ignorar arquivos
Em seu jest.config.js a opção transformIgnorePatterns ignorará todo tipo de arquivo que coincidir com o padrão regexp. Como por exemplo:

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

Discussion (0)