[Bug]: Incorrect Vitest Line Numbers with @storybook/experimental-nextjs-vite

[kenfdev]

Describe the bug

Description:

When using @storybook/experimental-nextjs-vite as the Storybook framework, Vitest reports incorrect code line numbers for errors in my tests. This makes debugging more difficult. I've confirmed that line numbers are reported accurately when using @storybook/react-vite.

Steps to Reproduce:

1. Set up a Storybook project with @storybook/experimental-nextjs-vite.
2. Write a test in a story file (e.g., Button.stories.ts) that will fail. For example, try to find an element that doesn't exist.
3. Run the Vitest tests.
4. Observe the line number reported in the error output. It will be incorrect.
5. Change the Storybook framework to @storybook/react-vite.
6. Run the Vitest tests again.
7. Observe that the line number reported in the error output is now correct.

Expected Behavior:

Vitest should report the correct line number where the error occurs in the story file, regardless of whether @storybook/experimental-nextjs-vite or @storybook/react-vite is used.

Current Behavior:

When using @storybook/experimental-nextjs-vite, Vitest reports an incorrect line number for the error.

Screenshots/Code Examples:

Correct Line Numbers (using @storybook/react-vite):

 FAIL    0 (chromium)  src/stories/Button.stories.ts > Primary
 TestingLibraryElementError:
 Click to debug the error directly in Storybook: http://localhost:6006/?path=/story/example-button--primary&addonPanel=storybook/test/panel

 Unable to find an element with the text: button. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

 Ignored nodes: comments, script, style
 <div>
   <button
     class="storybook-button storybook-button--medium storybook-button--primary"
     type="button"
   >
     Button
   </button>
 </div>

 Ignored nodes: comments, script, style
 <div>
   <button
     class="storybook-button storybook-button--medium storybook-button--primary"
     type="button"
   >
     Button
   </button>
 </div>
  ❯ waitForWrapper node_modules/.vite/deps/@storybook_test.js:13647:24
  ❯ node_modules/.vite/deps/@storybook_test.js:13696:55
  ❯ Instrumenter.invoke node_modules/.vite/deps/@storybook_test.js:1753:23
  ❯ Instrumenter.intercept node_modules/.vite/deps/@storybook_test.js:1701:141
  ❯ Instrumenter.track node_modules/.vite/deps/@storybook_test.js:1696:385
  ❯ Object.findByText node_modules/.vite/deps/@storybook_test.js:1689:261
  ❯ findByText src/stories/Button.stories.ts:35:37
      33|    play: async ({ canvasElement }) => {
      34|      const canvas = within(canvasElement);
      35|      const codeElement = await canvas.findByText('button');
          |                                       ^
      36|      await expect(codeElement).toBeInTheDocument();
      37|    },
  ❯ t node_modules/.pnpm/@storybook+core@8.6.12_storybook@8.6.12/node_modules/@storybook/core/dist/preview-api/index.js:3878:12
  ❯ node_modules/.vite/deps/@storybook_experimental-addon-test_internal_test-utils.js:56:109

 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯


  Test Files  1 failed | 2 passed (3)
        Tests  1 failed | 7 passed (8)
    Start at  14:01:00
    Duration  2.61s (transform 0ms, setup 750ms, collect 1.08s, tests 1.19s, environment 0ms, prepare 917ms)

Incorrect Line Numbers (using @storybook/experimental-nextjs-vite):

 FAIL    0 (chromium)  src/stories/Button.stories.ts > Primary
 TestingLibraryElementError:
 Click to debug the error directly in Storybook: http://localhost:6006/?path=/story/example-button--primary&addonPanel=storybook/test/panel

 Unable to find an element with the text: button. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

 Ignored nodes: comments, script, style
 <div>
   <button
     class="storybook-button storybook-button--medium storybook-button--primary"
     type="button"
   >
     Button
   </button>
 </div>

 Ignored nodes: comments, script, style
 <div>
   <button
     class="storybook-button storybook-button--medium storybook-button--primary"
     type="button"
   >
     Button
   </button>
 </div>
  ❯ waitForWrapper node_modules/.vite/deps/@storybook_test.js:13647:24
  ❯ node_modules/.vite/deps/@storybook_test.js:13696:55
  ❯ Instrumenter.invoke node_modules/.vite/deps/@storybook_test.js:1753:23
  ❯ Instrumenter.intercept node_modules/.vite/deps/@storybook_test.js:1701:141
  ❯ Instrumenter.track node_modules/.vite/deps/@storybook_test.js:1696:385
  ❯ Object.findByText node_modules/.vite/deps/@storybook_test.js:1689:261
  ❯ findByText src/stories/Button.stories.ts:40:31
      38| };
      39|
      40| export const Secondary: Story = {
          |                               ^
      41|   args: {
      42|     label: 'Button',
  ❯ t node_modules/.pnpm/@storybook+core@8.6.dist/preview-api/index.js:3878:12
  ❯ node_modules/.vite/deps/@storybook_experimental-addon-test_internal_test-utils.js:56:109

 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯


  Test Files  1 failed | 2 passed (3)
        Tests  1 failed | 7 passed (8)
    Start at  14:02:53
    Duration  2.59s (transform 0ms, setup 674ms, collect 1.18s, tests 1.19s, environment 0ms, prepare 949ms)

Reproduction link

https://github.com/kenfdev/storybook-vitest

Reproduction steps

1. Clone the repo above
2. npm install
3. npm test

The test should show the error I've explained above. This project was built with Vite + React and I added @storybook/experimental-nextjs-vite and nextjs manually. But I've confirmed this same phenomenon occurs in a real nextjs project, too.

System

Storybook Environment Info:

  System:
    OS: macOS 15.3
    CPU: (8) arm64 Apple M3
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.15.0 - /usr/local/bin/node
    Yarn: 1.22.18 - ~/.volta/bin/yarn
    npm: 10.7.0 - /usr/local/bin/npm
    pnpm: 10.7.1 - /opt/homebrew/bin/pnpm <----- active
  Browsers:
    Chrome: 134.0.6998.166
    Edge: 135.0.3179.54
    Safari: 18.3
  npmPackages:
    @storybook/addon-essentials: ^8.6.12 => 8.6.12 
    @storybook/addon-onboarding: ^8.6.12 => 8.6.12 
    @storybook/blocks: ^8.6.12 => 8.6.12 
    @storybook/experimental-addon-test: ^8.6.12 => 8.6.12 
    @storybook/experimental-nextjs-vite: ^8.6.12 => 8.6.12 
    @storybook/react: ^8.6.12 => 8.6.12 
    @storybook/react-vite: ^8.6.12 => 8.6.12 
    @storybook/test: ^8.6.12 => 8.6.12 
    eslint-plugin-storybook: ^0.12.0 => 0.12.0 
    storybook: ^8.6.12 => 8.6.12

Additional context

No response