Michael Thiessen

Mount Components When Testing in Nuxt

Invalid Date

When writing unit tests, you have access to a bunch of helper methods.

One super useful one is mountSuspended. It lets you mount any component inside your Nuxt context with async setup:

import { describe, it, expect } from 'vitest';

import { mountSuspended } from '@nuxt/test-utils/runtime';



import MyComponent from './MyComponent.vue';



describe('MyComponent', () => {

  it('renders the message correctly', async () => {

    const wrapper = await mountSuspended(MyComponent);

    expect(wrapper.text()).toContain('This component is set up.');

  });

});

You’re also able to mount your app at a specific route, by passing in the App component and a route:

import { describe, it, expect } from 'vitest';

import { mountSuspended } from '@nuxt/test-utils/runtime';



import App from './App.vue';



describe('About', () => {

  it('renders the about page', async () => {

    const wrapper = await mountSuspended(App, { route: '/about' });

    expect(wrapper.text()).toContain('Hi, my name is Michael!');

  });

});

Related Articles