为Nuxt和Pinia配置Vitest自动导入，解决API未识别问题

你的问题核心是Nuxt 3的自动导入机制在Vitest环境下不生效，导致ref、useCookie、useAppStore这些API无法被识别。下面是具体的解决步骤：

1. 补全AutoImport自动导入配置 #

Vitest不会自动继承Nuxt的自动导入规则，需要手动在vitest.config.js里通过unplugin-auto-import把缺失的API加进去：

修改vitest.config.js中的AutoImport插件配置，新增Pinia和Nuxt的自动导入模块：

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", // 原有Vue导入
        "pinia", // 新增Pinia相关API自动导入
        "#app" // 新增Nuxt自动导入模块，包含useCookie等
      ],
      dirs: ["./composables/", "./stores/"], // 加上stores目录，自动导入defineStore定义的store
      dts: true, // 可选：生成.d.ts文件，方便IDE提示
    }),
  ],
  test: {
    globals: true,
    environment: "jsdom",
    coverage: {
      provider: "c8",
      reporter: "html",
      reportsDirectory: "./coverage",
    },
    resolve: {
      alias: {
        "~": path.resolve(__dirname, "./"),
        "@": path.resolve(__dirname, "./"), // 可选：加上@别名，和Nuxt保持一致
      },
    },
    setupFiles: ["./tests/setup.js"], // 后续全局mock用，先加上
  },
});

2. Mock Nuxt的useCookie函数 #

Vitest运行在jsdom环境，没有Nuxt的Cookie上下文，必须手动mockuseCookie：

在项目根目录创建tests/setup.js文件，添加全局mock：

import { vi } from "vitest";
import { ref } from "vue";

// Mock useCookie，返回一个模拟的ref对象
vi.mock("#app", () => ({
  useCookie: (name, options) => {
    const cookieValue = ref(null);
    // 模拟cookie的基本读写行为
    return {
      get: () => cookieValue.value,
      set: (val) => (cookieValue.value = val),
      value: cookieValue.value
    };
  },
}));

3. 初始化Pinia并处理Store #

组件里用到useAppStore，测试时需要先初始化Pinia实例：

以测试你的示例组件为例，编写测试文件（比如tests/components/YourComponent.spec.js）：

import { mount } from "@vue/test-utils";
import { createPinia } from "pinia";
import YourComponent from "~/components/YourComponent.vue";
import useAppStore from "~/stores/app"; // 导入你的store

describe("YourComponent", () => {
  it("renders correctly", () => {
    const pinia = createPinia();
    // 可选：提前初始化store并设置测试数据
    const appStore = useAppStore(pinia);
    appStore.someState = "test value";

    const wrapper = mount(YourComponent, {
      global: {
        plugins: [pinia], // 把pinia挂载到测试组件的全局
      },
      props: {
        label: "Test Label",
      },
    });

    expect(wrapper.text()).toContain("Test Label");
  });
});

4. 额外注意事项 #

• 确保@pinia/nuxt、unplugin-auto-import这些依赖已经安装，如果没有的话执行：

  npm install -D @pinia/nuxt unplugin-auto-import
  

• 如果你的store是用defineStore自动导入生成的，确保AutoImport的dirs包含了./stores/目录，这样Vitest能识别useAppStore。

内容的提问来源于stack exchange，提问作者DevWizard