Using Vue Testing Library with Nuxt.js: A Beginner's Guide

Question

Using Vue Testing Library with Nuxt.js: A Beginner's Guide

Looking to incorporate Vue Testing Library into my Nuxt.js project. Encountered an error right after installation, where running a test results in the following message:

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

It seems that this error occurs because Nuxt.js does not utilize vue-cli-service.

Nevertheless, is there a straightforward method to integrate Vue Testing Library with Nuxt.js?

vue.js nuxt.js testing-library vue-testing-library

Answer 1

Answer №1

Seems like there is a possibility that you have an NPM script with vue-cli-service (as shown below), which is actually meant for projects scaffolded by Vue CLI:

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

But fear not, you can still set up Vue Testing Library using the methods detailed below.

Setting Up on a Fresh Project

When creating a new Nuxt project, opt for Jest as the testing framework and then install Vue Testing Library:

Create a Nuxt project with create-nuxt-app, and choose Jest when prompted about the Testing framework:

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

Example 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

Install Vue Testing Library (v5 is needed for Nuxt 2):
```
npm install -D @testing-library/vue@5
```
Execute tests using the test NPM script (generated from step 1):
```
npm run test
```

Setting Up on an Existing Nuxt Project

If you already have a Nuxt project without a testing framework, follow the jest template from @nuxt/create-nuxt-app to integrate Vue Testing Library:

Install the necessary NPM packages:

npm install -D @testing-library/vue@5 \
               vue-jest@^3 \
               jest@^26 \
               <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="61030003040d4c020e130421564f514f514c0313080506044f51">[email protected]</a> \
               babel-jest@^26

npm install -D ts-jest@^26 # if using TypeScript

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

Add an NPM script to execute Jest CLI:

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

Include a Jest configuration:

// <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'
  ]
}

Implement a Babel configuration:

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

Create a test directory and include the sample test file illustrated below (taken from Vue Testing Library example). Note that the location of test files can be customized using the testMatch or testRegex setting in jest.config.js.

Component Example:

<!-- <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>

Test Example:

// <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()
})

Execute tests using the test NPM script (added in step 2):
```
npm run test
```

Check out the GitHub demo here

Answer 2

Seems like there is a possibility that you have an NPM script with vue-cli-service (as shown below), which is actually meant for projects scaffolded by Vue CLI:

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

But fear not, you can still set up Vue Testing Library using the methods detailed below.

Setting Up on a Fresh Project

When creating a new Nuxt project, opt for Jest as the testing framework and then install Vue Testing Library:

Create a Nuxt project with create-nuxt-app, and choose Jest when prompted about the Testing framework:

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

Example 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

Install Vue Testing Library (v5 is needed for Nuxt 2):
```
npm install -D @testing-library/vue@5
```
Execute tests using the test NPM script (generated from step 1):
```
npm run test
```

Setting Up on an Existing Nuxt Project

If you already have a Nuxt project without a testing framework, follow the jest template from @nuxt/create-nuxt-app to integrate Vue Testing Library:

Install the necessary NPM packages:

npm install -D @testing-library/vue@5 \
               vue-jest@^3 \
               jest@^26 \
               <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="61030003040d4c020e130421564f514f514c0313080506044f51">[email protected]</a> \
               babel-jest@^26

npm install -D ts-jest@^26 # if using TypeScript

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

Add an NPM script to execute Jest CLI:

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

Include a Jest configuration:

// <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'
  ]
}

Implement a Babel configuration:

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

Create a test directory and include the sample test file illustrated below (taken from Vue Testing Library example). Note that the location of test files can be customized using the testMatch or testRegex setting in jest.config.js.

Component Example:

<!-- <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>

Test Example:

// <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()
})

Execute tests using the test NPM script (added in step 2):
```
npm run test
```

Check out the GitHub demo here

Using Vue Testing Library with Nuxt.js: A Beginner's Guide

Answer №1

Setting Up on a Fresh Project

Setting Up on an Existing Nuxt Project

Similar questions

Issues with HTTPS in Puppeteer and VUE JS

In a Vue project, classes are not being applied by TailwindCSS

Dynamic data display issue in Vue with Chart.js

Tips for adding comments to VueJs Single-File-Components

Whenever attempting to detach(), I am encountering the following error message: local.ERROR: Call to a member function programs() on an integer

Converting HTML elements into Vue.js Components

Is it possible to utilize the output of a function to determine the styling of a div element in Vue?

Contrasts in the immutability strategies of Vuex and Redux

Using vue-router within a pinia store: a step-by-step guide

Display an error message when the button is clicked and the input field is left empty in a Vue 3 script setup

VueGapi does not perform any actions when attempting to request multiple scopes simultaneously

Having trouble receiving responses from pusher when attempting to utilize private channels, without any error notifications being displayed

Ways to access deeply nested data in Vuex store

Executing a function in Vue.js upon state changes

Error: Unable to locate attribute 'indexOf' within null object in vuejs when using consecutive v-for directives

Exploring the new features of FabricJS version 3.4.0: Enhancing performance with filters and understanding the limitations of maxTexture

Is it possible to generate unique identifiers for v-for keys using vue-uuid?

Interactive Vue components with dynamic children and sub-children

What is the best way to connect data so that when a user clicks on a specific card, it appears on a popup card

Is it possible to extract the body from the post request using req.body.item?