Mocking in storyshots

[tehandyb]

Is it possible to Mock components when using storyshots? I can't see any documentation to do it.

[evenchange4]

Yes, it is possible. I mock several components for storyshots with Jest config:

"setupFiles": [
  "<rootDir>/.storybook/storyshots-setup.js"
],

// .storybook/storyshots-setup.js"
jest.mock('react-motion-ui-pack');
...

Reference: https://github.com/MCS-Lite/mcs-lite/blob/master/packages/mcs-lite-ui/package.json#L30

[tehandyb]

Awesome, thanks!

[horacio10x]

If you want to mock for the storyshots only you can put your mock above initStoryshots()

jest.mock('../someMock', () =>
  () => `mock`
);
initStoryshots();

[dheerajk02]

If you want to mock for the storyshots only you can put your mock above initStoryshots()

jest.mock('../someMock', () =>
  () => `mock`
);
initStoryshots();

@horacio10x @evenchange4 I get the following error if I try to jest mock right before the initStoryshots(); Do not import @jest/globals outside of the Jest test environment

// @ts-nocheck
import initStoryshots, { multiSnapshotWithOptions } from "@storybook/addon-storyshots";
import ReactDOM from "react-dom";
import path from "path";
jest.mock("@storybook/core/server", () => ({
    toRequireContext: require("@storybook/core/dist/server/preview/to-require-context").toRequireContext,
}));
ReactDOM.createPortal = node => node;
initStoryshots({
    configPath: path.resolve(__dirname, "../../.storybook"),
    test: multiSnapshotWithOptions({}),
});

@akanksha-swiggy