Nuxt•2d ago

How do you make component tests in Nuxt 3?

Guys how do you make visual component tests in Nuxt 3?

2 Replies

Hi @Dani (ダニー). I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To make component tests in Nuxt 3, you have a few options. Here's an overview of how you can set up and write component tests: 1. Using @nuxt/test-utils: Nuxt provides built-in support for unit testing through @nuxt/test-utils. This allows you to test components within the Nuxt environment. Here's how you can set it up: - Install the necessary dependencies:

npm i --save-dev @nuxt/test-utils vitest @vue/test-utils happy-dom playwright-core

npm i --save-dev @nuxt/test-utils vitest @vue/test-utils happy-dom playwright-core

- Create a vitest.config.ts file with the Nuxt environment configuration:

import { defineVitestConfig } from '@nuxt/test-utils/config'

export default defineVitestConfig({
  // any custom Vitest config you require
})

import { defineVitestConfig } from '@nuxt/test-utils/config'

export default defineVitestConfig({
  // any custom Vitest config you require
})

- Write your tests using the mountSuspended helper:

import { mountSuspended } from '@nuxt/test-utils/runtime'
import { SomeComponent } from '#components'

it('can mount some component', async () => {
    const component = await mountSuspended(SomeComponent)
    expect(component.text()).toMatchInlineSnapshot(
        '"This is an auto-imported component"'
    )
})

import { mountSuspended } from '@nuxt/test-utils/runtime'
import { SomeComponent } from '#components'

it('can mount some component', async () => {
    const component = await mountSuspended(SomeComponent)
    expect(component.text()).toMatchInlineSnapshot(
        '"This is an auto-imported component"'
    )
})

Nuxt Documentation - Unit Testing (https://nuxt.com/docs/getting-started/testing#unit-testing) 2. Using @vue/test-utils directly: If you prefer to use @vue/test-utils on its own for unit testing in Nuxt, and you are only testing components which do not rely on Nuxt composables, auto-imports or context, you can follow these steps: - Install the dependencies:

npm i --save-dev vitest @vue/test-utils happy-dom @vitejs/plugin-vue

npm i --save-dev vitest @vue/test-utils happy-dom @vitejs/plugin-vue

- Create a vitest.config.ts file:

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'happy-dom',
  },
});

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'happy-dom',
  },
});

- Add a test script to your package.json:

"scripts": {
  "test": "vitest"
},

"scripts": {
  "test": "vitest"
},

- Write your tests:

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'

import HelloWorld from './HelloWorld.vue'

describe('HelloWorld', () => {
  it('component renders Hello world properly', () => {
    const wrapper = mount(HelloWorld)
    expect(wrapper.text()).toContain('Hello world')
  })
})

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'

import HelloWorld from './HelloWorld.vue'

describe('HelloWorld', () => {
  it('component renders Hello world properly', () => {
    const wrapper = mount(HelloWorld)
    expect(wrapper.text()).toContain('Hello world')
  })
})

Nuxt Documentation - Using @vue/test-utils (https://nuxt.com/docs/getting-started/testing#using-vuetest-utils) These approaches allow you to write component tests in Nuxt 3. The first method using @nuxt/test-utils is more integrated with the Nuxt environment, while the second method using @vue/test-utils directly is simpler but may not support all Nuxt-specific features. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@163299047514439680> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

How do you make component tests in Nuxt 3?