[Bug] Jest mock not working

[KorySchneider]

Describe the bug

I am unable to mock (for example) Math.random().

Previously with storyshots, I had this line in my storyshots.test.js file:

jest.spyOn(global.Math, 'random').mockImplementation(() => 0.5);

which ensured consistent randomization for snapshot tests. Other mocks were also set up in this file.

With the new test-runner, I have tried:

• placing the above line in my .storybook/test-runner.js file
  • in the setup() hook
  • at the beginning of the file before the module.exports
• configuring this with setupFiles in my jest.config.js
• overriding global.Math without using jest

  const mockMath = Object.create(global.Math);
  mockMath.random = () => 0.5;
  global.Math = mockMath;

  • tried in both setup() hook and test-runner.js root
  • also tried with globalThis instead of global

None of these solutions have worked.

Steps to reproduce the behavior

1. Have a story that includes a randomized value.
   • In my case it is FontAwesomeIcon with a title prop, as discussed here.
   • Could be as simple as const TestComponent = () => <p>{Math.random()}</p>.
2. Enable DOM snapshot testing.
   I am using the recipe from the docs of this project.
3. Run tests to write initial snapshots.
4. Run tests again and see that generated values are different.

Expected behavior

Should be able to use jest mocks.
If Math.random() was successfully mocked, the snapshots would be consistent.

Screenshots and/or logs

Snapshot failure example:

-           <svg aria-labelledby="svg-inline--fa-title-MUbC0SPKa77A"
+           <svg aria-labelledby="svg-inline--fa-title-Q0oa51LhW5lG"

Environment

• Storybook: 7.0.20 with Vite and React
• OS: macOS Ventura
• Node.js version: 18.16.0
• NPM version: 9.5.1

Additional context

If there is a correct way to do this that I've missed, it should be called out in the project docs.

[yannbf]

Hey @KorySchneider thanks for opening this issue.

There seems to be a slight misinterpretation of what the test-runner does.
The Storybook test-runner spawns a browser using Playwright, then accesses a running Storybook, and then visits every story to check whether they render correctly.

Because your Storybook is already running, the test-runner is more of a "visitor" than anything. That means, whatever you need to mock, in the context of your Storybook stories, should be done in your Storybook.

There are different mechanisms to mock things in Storybook, and what you're trying to achieve should be possible with the @storybook/jest package like so:

// .storybook/preview.ts
import { jest } from '@storybook/jest'
jest.spyOn(global.Math, 'random').mockImplementation(() => 0.5);

Please try it out and let me know. Thanks!

@HinataKah0 I'm mentioning you as well, this information might be useful to you. If your project needs mocking on another level, you might need module level mocking with Webpack/Vite.

I'll be closing this issue if you all don't mind!