@nuxt/test-utils

What is @nuxt/test-utils?

@nuxt/test-utils is a testing utility package for Nuxt.js applications. It provides a set of tools to facilitate the testing of Nuxt.js applications, including server-side rendering (SSR), static site generation (SSG), and client-side rendering (CSR). The package aims to simplify the setup and execution of tests, making it easier to ensure the reliability and correctness of Nuxt.js applications.

What are @nuxt/test-utils's main functionalities?

Setup and Teardown

This feature allows you to set up and tear down the Nuxt.js application before and after running tests. It ensures that the application is properly initialized and cleaned up, providing a consistent testing environment.

const { setup, loadConfig, get } = require('@nuxt/test-utils');

beforeAll(async () => {
  await setup({
    // Nuxt config options
  });
});

afterAll(async () => {
  await teardown();
});

Rendering Components

This feature allows you to render and test individual components in isolation. You can pass props and check the rendered output to ensure that the component behaves as expected.

const { mount } = require('@nuxt/test-utils');

const wrapper = mount(MyComponent, {
  propsData: {
    prop1: 'value1'
  }
});

expect(wrapper.html()).toContain('expected content');

Testing Routes

This feature allows you to test the output of specific routes in your Nuxt.js application. You can make requests to routes and verify the response content to ensure that the routes are working correctly.

const { get } = require('@nuxt/test-utils');

const { body } = await get('/some-route');

expect(body).toContain('expected content');

Snapshot Testing

This feature allows you to perform snapshot testing on your components. It captures the rendered output and compares it to a saved snapshot to detect any unexpected changes.

const { mount } = require('@nuxt/test-utils');

const wrapper = mount(MyComponent);

expect(wrapper.html()).toMatchSnapshot();

Other packages similar to @nuxt/test-utils

vue-test-utils

vue-test-utils is the official testing utility library for Vue.js applications. It provides similar functionalities for testing Vue components, such as mounting components, interacting with them, and asserting their output. While @nuxt/test-utils is tailored for Nuxt.js, vue-test-utils is more general and can be used with any Vue.js application.

jest

jest is a popular JavaScript testing framework that works with various JavaScript libraries and frameworks, including Vue.js and Nuxt.js. It provides a comprehensive set of tools for writing and running tests, including mocking, snapshot testing, and code coverage. While jest is not specific to Nuxt.js, it can be used in conjunction with @nuxt/test-utils for a more robust testing setup.

cypress

cypress is an end-to-end testing framework that allows you to test the entire application, including the frontend and backend. It provides a powerful and user-friendly interface for writing and running tests, with features like time travel, real-time reloads, and automatic waiting. While cypress is not specific to Nuxt.js, it can be used to test Nuxt.js applications comprehensively.

README

Nuxt Test Utils

🧪 Nuxt Test Utils

Overview

Nuxt offers first-class support for e2e and unit testing of your Nuxt applications.

Nuxt Test Utils is currently powering the tests we use on Nuxt itself, as well as tests used throughout the module ecosystem.

You can find out more about how to use Nuxt Test Utils:

• in a general overview
• in an in-depth guide for module authors

License

MIT

Changelog

v3.11.0

compare changes

🚀 Enhancements

• vitest-environment: Add support for in-source testing (#651)

🩹 Fixes

• runtime: Reset modules after nuxt setup runs (#726)

✅ Tests

• Add example of mocking vue-router (e293cea1)
• Add example of mocking nuxt useRoute (fe465193)

❤️ Contributors

• Daniel Roe (@danielroe)