Test a component with Vitest using useNuxtApp with Nuxt 3

Question

I want to test a component using the useNuxtApp composable. This is the component(MyComponent.vue):

<template>
  <div class="flex justify-between">
    <span>{{ $fmt(12) }}</span>
  </div>
</template>

<script lang="ts" setup>
const { $fmt } = useNuxtApp()
</script>

$fmt is a plugin in plugins folder.

The problem is when I try to test MyComponent.vue with vitest, the test is not started and this error appears:

ReferenceError: useNuxtApp is not defined

I don't know how to mock the useNuxtApp composable

Adri HM · Accepted Answer · 2022-07-21 20:09:34Z

The solution is to import useNuxtApp in your component:

<template>
  <div class="flex justify-between">
    <span>{{ $fmt(12) }}</span>
  </div>
</template>

<script lang="ts" setup>
import { useNuxtApp } from '#app'
const { $fmt } = useNuxtApp()
</script>

add the #app and #head aliases in vitest.config.js to import useNuxtApp in your test file also:

import path from 'path'
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './tests/unit/setup/index.ts',
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '.'),
      '#app': path.resolve(
        __dirname,
        './node_modules/nuxt/dist/app/index.d.ts'
      ),
      '#head': path.resolve(
        __dirname,
        './node_modules/nuxt/dist/app/index.d.ts'
      ),
    },
  },
}

And finally you can mock useNuxtApp in your test file:

import { vi } from 'vitest'
import * as nuxt from '#app'
import { currency } from '@/plugins/utils/fmt-util'

// @ts-ignore
vi.spyOn(nuxt, 'useNuxtApp').mockImplementation(() => ({
  $fmt: { currency },
}))

oerol · Accepted Answer · 2023-08-02 15:06:09Z

4

Instead of mocking, you can use stubbing:

vi.stubGlobal("useNuxtApp", () => ({
  $fmt: vi.fn(),
}));

If you need to mock functions of $fmt (let's say doSomething()), then just extend it like this:

vi.stubGlobal("useNuxtApp", () => ({
  $fmt: { doSomething: vi.fn() },
}));

edited Aug 2, 2023 at 15:06

answered Aug 2, 2023 at 6:14

oerol

1572 silver badges9 bronze badges

1 Comment

ITW Over a year ago

works like a charm!

Collectives™ on Stack Overflow

Test a component with Vitest using useNuxtApp with Nuxt 3

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related