Vitest setup auto-import for Nuxt and pinia

Question

I'm trying to setup vitest + @vue/test-utils but I can't test some components that use ref(Vue) or useCookie (Nuxt), I have the same problem with Pinia as well where I import globally 2 functions in the nuxt.config.js like this

[
  "@pinia/nuxt",
  {
    autoImports: ["defineStore", "acceptHMRUpdate"],
  },
];

This is my vitest.config.js setup:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import path from "path";

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue"],
      dirs: ["./composables/"],
    }),
  ],
  test: {
    globals: true,
    environment: "jsdom",
    coverage: {
      provider: "c8",
      reporter: "html",
      reportsDirectory: "./coverage",
    },
    resolve: {
      alias: {
        "~": path.resolve(__dirname, "./"),
      },
    },
  },
});

and the component I'm trying to test is something like this:

<script setup>
import AButton from '~/components/atoms/a-button/a-button.vue'
...

defineProps({
  label: {
    type: String,
    required: true
  },
})

const show = ref(false)

const Squad = useCookie('squad', { maxAge: 60 * 60 * 24 * 7 })
const appStore = useAppStore()

In Nuxt 3 as you know you don't import { ref } from vue or ... useCookie from.. they are auto-imported but vitest doesn't recognize them, I saw a couple of questions but none have an answer that solves my problem.

These are some:

• Auto-import vue reactivity system in vitest for testing composables in Nuxt 3 and vitest
• Testing Pinia store inside Nuxt3 with vitest throws `useRuntimeConfig` not defined

Pellikka

Answer 1

I had the same problem with refs and Nuxt 3 and I solved it by using unplugin-auto-import/vite

After installing, add the AutoImport configuration to the vitest.config.ts:

import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";

export default {
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue"],
    }),
  ],
  test: {
    globals: true,
    environment: "jsdom",
  },
  coverage: {
    all: true,
  },
};

Subdominant

yes I managed to import vue stuff like you but I'm still unable to auto import Nuxt stuff – Pellikka

Hello, finally I found a solution for mocking the Nuxt auto imports in my test components. Here there's an example. medium.com/@ana.robles.developer/… – Subdominant

mock everything doesn't really seem a robust solution, it solved it yes but not sure is the correct way. it would mean mock useRuntimeConfig or useCookie etc... – Pellikka

No final solution for this guys? The Ana hack doesn't work for me. Same error for useRoute, useHead, useSeoMeta. – Trophoblast

Answer 2

you can use nuxt-vitest plugin,

Install the following dependencies

pnpm add -D nuxt-vitest vitest happy-dom vitest-environment-nuxt

Add nuxt-vitest to your nuxt.config.js:

export default defineNuxtConfig({
  // ...
  modules: [
    'nuxt-vitest'
  ]
})

Then create a vitest.config.js with the following content:

import { defineVitestConfig } from 'nuxt-vitest/config';
export default defineVitestConfig({
  test: {
    environment: 'nuxt',
  },
});

Please note this will return an error with vitest version 0.34 or above, make sure to use vitest 0.33

I reported the error on github https://github.com/danielroe/nuxt-vitest/issues/341

Dope

I'm not working on this project for the moment so I can't test it, though I did see it at the time and I see that is still there the warning, it says WARNING: This library is in active development and you should pin the patch version before using. Doesn't feel like something you'd like to use in prod. – Pellikka

Still better approach than manually adding every nuxt composable that's auto-imported, also if it gets installed on the devDepencies it wouldn't even make it to production, this is just for unit testing, which you can have pipelines run before doing a build – Dope

sure this would go in the CI/CD and not in prod but still unstable dependencies compared with other ones :) – Pellikka

Answer 3

vi.stubGlobal('useCookie', vi.fn().mockImplementation(() => ({})));

Otilia