[Bug]: @storybook/experimental-addon-test doesn't have access to the Nuxt instance when running in CLI

[pbilyk]

Describe the bug

I have a couple of stories that use and components, and they work fine, passing the component tests when run through the Storybook webapp.

However, when I run the tests through the CLI I get the [Error: [nuxt] instance unavailable] and the components that need Nuxt do not render at all resulting in failing tests.

My config is:

main.ts:

/** @type { import('storybook-vue').StorybookConfig } */
const config = {
  stories: ["../components/**/*.mdx", "../components/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-coverage",
    "@storybook/experimental-addon-test",
  ],
  framework: {
    name: "@storybook-vue/nuxt",
  },
  viteFinal: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      vue$: "vue/dist/vue.esm-bundler.js",
      vue: "vue/dist/vue.esm-bundler.js",
    };
    return config;
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

vitest.setup.ts:

import { beforeAll } from "vitest";
import { setProjectAnnotations } from "@storybook/vue3";
import * as previewAnnotations from "./preview";

const annotations = setProjectAnnotations([previewAnnotations]);

// Run Storybook's beforeAll hook
beforeAll(annotations.beforeAll);

vitest.config.ts:

import { fileURLToPath } from "node:url";
import { configDefaults, coverageConfigDefaults } from "vitest/config";
import { defineVitestConfig } from "@nuxt/test-utils/config";

export default defineVitestConfig({
  test: {
    globals: true,
    environment: "jsdom", // 'happy-dom' or 'jsdom'
    environmentOptions: {
      nuxt: {
        domEnvironment: "jsdom", // 'nuxt' or 'jsdom',
        overrides: {
          // @ts-ignore
          auth: {
            globalAppMiddleware: {
              isEnabled: false,
            },
          },
        },
      },
    },
    root: fileURLToPath(new URL("./", import.meta.url)),
    exclude: [...configDefaults.exclude],
    setupFiles: ["vitest-setup.ts"],
    coverage: {
      provider: "v8",
      reporter: [["text"], ["html"], ["lcov", { projectRoot: "../" }], ["json"]],
      // https://vitest.dev/config/#coverage-exclude
      exclude: [
        "tailwind.config.js",
        "**/.storybook/**",
        "**/*.stories.@(js|jsx|ts|tsx|mdx)",
        ...coverageConfigDefaults.exclude,
      ],
    },
  },
});

vitest.workspace.ts:

import { defineWorkspace } from "vitest/config";
import { storybookTest } from "@storybook/experimental-addon-test/vitest-plugin";
import path from "node:path";
import { fileURLToPath } from "node:url";

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

export default defineWorkspace([
  // This is the path to your existing Vitest config file
  "./vitest.config.ts",
  {
    // This is the path to your existing Vite config file
    extends: "./vite.config.ts",
    plugins: [
      storybookTest({
        // The location of your Storybook config, main.js|ts
        configDir: path.join(dirname, ".storybook"),
        // This should match your package.json script to run Storybook
        // The --ci flag will skip prompts and not open a browser
        storybookScript: "yarn storybook --ci",
      }),
    ],
    test: {
      name: "storybook",
      // Enable browser mode
      browser: {
        enabled: true,
        instances: [
          {
            browser: "chromium",
          },
        ],
        // Make sure to install Playwright
        provider: "playwright",
        headless: true,
      },
      setupFiles: ["./.storybook/vitest.setup.ts"],
    },
  },
]);

Reproduction link

http://example.com

Reproduction steps

No response

System

System:
    OS: macOS 15.2
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn <----- active
    npm: 9.5.1 - ~/.nvm/versions/node/v18.18.0/bin/npm
  Browsers:
    Chrome: 132.0.6834.111
    Edge: 132.0.2957.127
    Safari: 18.2
  npmPackages:
    @storybook/addon-coverage: ^1.0.5 => 1.0.5 
    @storybook/addon-essentials: 8.5.2 => 8.5.2 
    @storybook/addon-links: 8.5.2 => 8.5.2 
    @storybook/blocks: 8.5.2 => 8.5.2 
    @storybook/experimental-addon-test: ^8.5.2 => 8.5.2 
    @storybook/test: 8.5.2 => 8.5.2 
    @storybook/testing-vue3: ^1.0.0 => 1.0.0 
    @storybook/vue3-vite: ^8.5.2 => 8.5.2 
    storybook: 8.5.2 => 8.5.2

Additional context

No response

[valentinpalkovic]

Hi @pbilyk

Thank you for opening the issue.

Can you please provide a reproduction?
https://storybook.new

[valentinpalkovic]

@tobiasdiez Can you maybe take a quick look?

[tobiasdiez]

I haven't yet had the chance to play with the storybook-vitest integration, but based on my stomach feeling I would say the problem is that one needs to initialize nuxt first in the vitest environment, see https://nuxt.com/docs/getting-started/testing.

Perhaps this also requires additional changes in the nuxt storybook module (https://github.com/nuxt-modules/storybook). I don't have the capacity to work on this in the foreseeable future, but would be happy to review PRs.

[pbilyk]

@valentinpalkovic Here is the reproduction repo https://github.com/pbilyk/nuxt-storybook-issues

The test for image passes in the client but fails in the CLI and in the output you can see that the image is not rendered in the headless mode.

This also includes another issue that I ran into recently, where when you make a change in a component you gat an error saying __VUE_HMR_RUNTIME__ is not defined

Should I make a new bug for this ro this is already tracked somewhere?

[dxlliv]

I'm experiencing this issue too, I'm using Storybook in a Nuxt Layer with future.compatibilityVersion: 4

[pbilyk]

Hello @valentinpalkovic! Did you have a chance to check the reproduction I provided? And also the issue that I reported below?

[valentinpalkovic]

Unfortunately, I am not the Nuxt expert in the Storybook team. I am forwarding this to @kasperpeulen.

[pbilyk]

@kasperpeulen sorry to bother you but did you have a chance to look at this issue?