@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

Test utilities for Nuxt.js

• ✨ Release Notes
• 📖 Documentation

Features

• Easy to setup tests
• Test in brownser
• Extend jest matchers
• Written in TypeScript

Usage

1. Add @nuxt/test-utils devDependency to your project

yarn add --dev @nuxt/test-utils # or npm install --save-dev @nuxt/test-utils

1. Add @nuxt/test-utils to the preset section of jest.config.js

module.exports = {
  preset: '@nuxt/test-utils'
}

📖 Read more

Development

1. Clone this repository
2. Install dependencies using yarn install

📑 License

MIT License

Copyright (c) Nuxt.js Team