How to use Vue Testing Library with Nuxt.js?

Question

I want to use Vue Testing Library in my Nuxt.js app. But straight after installing the package, launching a test triggers this error:

'vue-cli-service' is not recognized as an internal or external command, operable program or batch file.

This is presumably because Nuxt.js does not use vue-cli-service.

Despite that, is there a simple way to use Vue Testing Library with Nuxt.js?

Answer 1

It sounds like you might have an NPM script that includes vue-cli-service (as shown below), but that's intended for Vue CLI scaffolded projects:

{
  "scripts": {
    "test:unit": "vue-cli-service test:unit" ❌ not for Nuxt projects
  }
}

However, you could setup Vue Testing Library using one of the methods outlined below.

Setup on new project

When generating a new Nuxt project, select Jest for testing, and install Vue Testing Library on top of that:

1. Scaffold a Nuxt project with create-nuxt-app, and select Jest at the Testing framework prompt:

   npx create-nuxt-app nuxt-testing-library-demo
   

   Sample output:

   $ npx create-nuxt-app nuxt-testing-library-demo
   
   create-nuxt-app v3.5.2
   ✨  Generating Nuxt.js project in  nuxt-testing-library-demo
   [...]
   ? Testing framework: Jest
   

2. Install Vue Testing Library (v5 required for Nuxt 2):

   npm install -D @testing-library/vue@5
   

3. Run tests with the test NPM script (scaffolded from step 1):

   npm run test
   

Setup on existing Nuxt project

For an already existing Nuxt project that has no testing framework, mimic the jest template from @nuxt/create-nuxt-app to add Vue Testing Library support:

1. Install the prerequisite NPM packages:

   npm install -D @testing-library/vue@5 \
                  vue-jest@^3 \
                  jest@^26 \
                  babel-core@7.0.0-bridge.0 \
                  babel-jest@^26
   
   npm install -D ts-jest@^26 # if using TypeScript
   

For Nuxt v2, install @testing-library/vue@5.

2. Add an NPM script to run Jest CLI:

   // <rootDir>/package.json
   {
     "scripts": {
       "test": "jest"
     }
   }
   

3. Add a Jest config:

   // <rootDir>/jest.config.js
   module.exports = {
     moduleNameMapper: {
       '^@/(.*)$': '<rootDir>/$1',
       '^~/(.*)$': '<rootDir>/$1',
       '^vue$': 'vue/dist/vue.common.js'
     },
     moduleFileExtensions: [
       'ts', // if using TypeScript
       'js',
       'vue',
       'json'
     ],
     transform: {
       "^.+\\.ts$": "ts-jest", // if using TypeScript
       '^.+\\.js$': 'babel-jest',
       '.*\\.(vue)$': 'vue-jest'
     },
     collectCoverage: true,
     collectCoverageFrom: [
       '<rootDir>/components/**/*.vue',
       '<rootDir>/pages/**/*.vue'
     ]
   }
   

4. Add a Babel config:

   // <rootDir>/.babelrc
   {
     "env": {
       "test": {
         "presets": [
           [
             "@babel/preset-env",
             {
               "targets": {
                 "node": "current"
               }
             }
           ]
         ]
       }
     }
   }
   

5. Create a test directory, containing the example test file shown below (taken from Vue Testing Library example). Note the location of the test files can be configured with the testMatch or testRegex setting in jest.config.js.

   Example component:

   <!-- <rootDir>/components/Counter.vue -->
   <template>
     <div>
       <p>Times clicked: {{ count }}</p>
       <button @click="increment">increment</button>
     </div>
   </template>
   
   <script>
     export default {
       data: () => ({
         count: 0,
       }),
       methods: {
         increment() {
           this.count++
         },
       },
     }
   </script>
   

   Example test:

   // <rootDir>/test/Counter.spec.js
   import {render, screen, fireEvent} from '@testing-library/vue'
   import Counter from '@/components/Counter.vue'
   
   test('increments value on click', async () => {
     render(Counter)
     expect(screen.queryByText('Times clicked: 0')).toBeTruthy()
   
     const button = screen.getByText('increment')
     await fireEvent.click(button)
     await fireEvent.click(button)
     expect(screen.queryByText('Times clicked: 2')).toBeTruthy()
   })
   

6. Run tests with the test NPM script (added in step 2):

   npm run test
   

GitHub demo