Alias import issues in Vitest

Question

I'm trying to have Vitest + Storybook setup and the following is my vitest.config.ts:

import path from "path";
import { fileURLToPath } from "node:url";

import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";

import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";

import { playwright } from "@vitest/browser-playwright";

const dirname = typeof __dirname !== "undefined" ? __dirname : path.dirname(fileURLToPath(import.meta.url));

// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
export default defineConfig({
    plugins: [tsconfigPaths(), react()],
    test: {
        projects: [
            {
                extends: true,
                plugins: [
                    // The plugin will run tests for the stories defined in your Storybook config
                    // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
                    storybookTest({ configDir: path.join(dirname, ".storybook") }),
                ],
                test: {
                    name: "storybook",
                    browser: {
                        enabled: true,
                        headless: true,
                        provider: playwright({}),
                        instances: [{ browser: "chromium" }],
                    },
                    setupFiles: [".storybook/vitest.setup.ts"],
                },
            },
            {
                test: {
                    name: "unit",
                    environment: "jsdom",
                    setupFiles: ["tests/setup.ts"],
                    include: ["actions/__tests__/**/*.test.ts"],
                    globals: true,
                },
            },
        ],
    },
});

It was originally generated by Storybook and I was trying to add a unit tests for my Next.js server actions and added the second, "unit" project. The Storybook tests work flawlessly but when the unit tests starts to run I'm getting an error along the following lines:

Failed to resolve import "@/lib/utils" from "actions/__tests__/actions.spec.ts". Does the file exist?

I'm using tsconfigPaths and also the following is my tsconfig.json:

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },

  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

VariantAbdulaziz · Accepted Answer · 2025-11-12 10:50:44Z

0

The issue was fixed after I've added plugins: [tsconfigPaths(), react()] the following in the root of the second project

{
    test: {
        name: "unit",
        environment: "jsdom",
        setupFiles: ["./tests/setup.ts"],
        include: ["actions/__tests__/**/*.spec.ts"],
        globals: true,
    },
    plugins: [tsconfigPaths(), react()],
},

answered Nov 12 at 10:50

VariantAbdulaziz

92 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Alias import issues in Vitest

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related