Michael Thiessen

Mock Nuxt Components When Testing

Invalid Date

When testing, you'll often need to shallow render a component — mocking out any descendent components to keep your test simpler.

With @nuxt/test-utils you can use the mockComponent utility method to help with that:

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

// Use Options API to configure
mockComponent('MyComponent', {
  props: {
    value: String
  },
  setup(props) {
        // ...
  },
});

// Or use a separate file to clean things up (and use <script setup>)
mockComponent('MyComponent', () => import('./MyComponent.mock.vue'));

// ...tests