Nuxt Vitest

Overview

Nuxt-vitest is a library that provides a vitest environment for testing code that requires a Nuxt runtime environment. It is currently in active development and caution should be taken when using it. The library offers features such as built-in mocks for the DOM environment, helpers for testing Nuxt apps, and the ability to mock Nuxt’s auto import functionality.

Features

• Vitest Environment: Allows for testing code that requires a Nuxt runtime environment.
• Built-in Mocks: Provides built-in mocks for the DOM environment, including a dummy class for the IntersectionObserver API and a functional mock of the IndexedDB API.
• Testing Helpers: Includes a number of helpers such as mountSuspended and renderSuspended to make testing Nuxt apps easier.
• Mock Nuxt Auto Import: Allows for mocking Nuxt’s auto import functionality.

Installation

To install nuxt-vitest, follow these steps:

1. Install nuxt-vitest by running the command npm install nuxt-vitest.

2. Add nuxt-vitest to your nuxt.config.js file:

// nuxt.config.js
{
  buildModules: ['nuxt-vitest']
}

3. Create a vitest.config.ts file with the provided content.

4. Set the environment for your tests. You can do this in multiple ways:

   • Test files containing .nuxt. in their filename will be run in the Nuxt environment automatically.
   • Add @vitest-environment nuxt as a comment in your test file to opt-in per test file.
   • Set environment: 'nuxt' in the vitest.config.ts file to enable the Nuxt environment for all tests.

5. Take care not to mutate the global state in your tests when running them in the Nuxt environment.

Summary

Nuxt-vitest is a library that provides a vitest environment for testing code that requires a Nuxt runtime environment. It offers features such as built-in mocks for the DOM environment, testing helpers, and the ability to mock Nuxt’s auto import functionality. Caution should be taken when using the library as it is currently in active development.