Describe the bug
I'm attempting to use vitest's new toMatchScreenshot() matcher to test storybook stories.
After invoking storybook's composeStory function, the test context seems to get lost. It's likely that storybook is mucking with something global that's breaking something inside vitest but I couldn't find it on my own since I'm not very familiar with how browser mode works under the hood.
Reproduction
The minimal repro looks like this:
import { expect, test } from 'vitest'
import { render } from 'vitest-browser-react'
import { composeStory } from '@storybook/react-vite'
import meta, { ExampleStory } from './HelloWorld.stories.tsx'
const Example = composeStory(ExampleStory, meta)
test('renders name', async () => {
const screen = await render(<div data-testid="story"><Example /></div>);
await expect(screen.getByTestId('story')).toMatchScreenshot()
})
and the error looks like:
but I've made a runnable project here which is a minimal change on top of the npx vitest init browser: https://github.com/djrenren/vitestScreenshotTestFailure.
Just run npm run test:browser
System Info
System:
OS: macOS 15.6.1
CPU: (14) arm64 Apple M3 Max
Memory: 1000.64 MB / 36.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.16.0 - /Users/john/.nvm/versions/node/v22.16.0/bin/node
npm: 10.9.2 - /Users/john/.nvm/versions/node/v22.16.0/bin/npm
pnpm: 10.18.3 - /Users/john/.nvm/versions/node/v22.16.0/bin/pnpm
bun: 1.1.29 - /Users/john/.bun/bin/bun
Deno: 1.41.3 - /Users/john/.deno/bin/deno
Browsers:
Brave Browser: 141.1.83.120
Chrome: 141.0.7390.123
Firefox: 144.0
Firefox Developer Edition: 132.0
Safari: 18.6
Safari Technology Preview: 18.4
npmPackages:
@vitejs/plugin-react: ^5.1.0 => 5.1.0
@vitest/browser-playwright: ^4.0.4 => 4.0.4
vitest: ^4.0.4 => 4.0.4
vitest-browser-react: ^2.0.2 => 2.0.2
Used Package Manager
npm
Validations
Describe the bug
I'm attempting to use vitest's new
toMatchScreenshot()matcher to test storybook stories.After invoking storybook's
composeStoryfunction, the test context seems to get lost. It's likely that storybook is mucking with something global that's breaking something inside vitest but I couldn't find it on my own since I'm not very familiar with how browser mode works under the hood.Reproduction
The minimal repro looks like this:
and the error looks like:
but I've made a runnable project here which is a minimal change on top of the
npx vitest init browser: https://github.com/djrenren/vitestScreenshotTestFailure.Just run
npm run test:browserSystem Info
System: OS: macOS 15.6.1 CPU: (14) arm64 Apple M3 Max Memory: 1000.64 MB / 36.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 22.16.0 - /Users/john/.nvm/versions/node/v22.16.0/bin/node npm: 10.9.2 - /Users/john/.nvm/versions/node/v22.16.0/bin/npm pnpm: 10.18.3 - /Users/john/.nvm/versions/node/v22.16.0/bin/pnpm bun: 1.1.29 - /Users/john/.bun/bin/bun Deno: 1.41.3 - /Users/john/.deno/bin/deno Browsers: Brave Browser: 141.1.83.120 Chrome: 141.0.7390.123 Firefox: 144.0 Firefox Developer Edition: 132.0 Safari: 18.6 Safari Technology Preview: 18.4 npmPackages: @vitejs/plugin-react: ^5.1.0 => 5.1.0 @vitest/browser-playwright: ^4.0.4 => 4.0.4 vitest: ^4.0.4 => 4.0.4 vitest-browser-react: ^2.0.2 => 2.0.2Used Package Manager
npm
Validations