Storyshots

[maxsalven]

Has anyone managed to get https://storybook.js.org/addons/@storybook/addon-storyshots to work with vitest?

[AndrewLeedham]

Hi @maxsalven I tried to get it working this morning, not having much luck. @storybook/addon-storyshots is just too dependent on Jest. I tried setting the globals it uses to those from Vitest, but had no luck. Given this is in the source code, it doesn't seem worth persuing: https://github.com/storybookjs/storybook/blob/00f8e2a1cbdbc97302d3881c646730f7f47b1e26/addons/storyshots/storyshots-core/src/api/index.ts#L29

I can see 3 possible options here:

1. Refactor @storybook/addon-storyshots to be compatible with Vitest, this would likely entail some new options to pass things like expect/describe/beforeAll etc. Also would probably need some adaption of jest-specific-snapshot to work in Vitest.
2. Create a new third-party version of @storybook/addon-storyshots, e.g storybook-addon-storyshots-vitest this could potentially drop the dependency on jest-specific-snapshot.
3. Implement the parts of storyshots needed for our projects internally.

[AndrewLeedham]

I raised an issue to discuss a potential solution over on the Storybook issues repo: storybookjs/storybook#17578

[rockwotj]

I ended up just rolling my own small test function, although we only test stories render (no screen shots) so we we able to do something simple like the following

const modules: Record<string, any> = import.meta.globEager('./**/*.stories.tsx');

describe('Storybook', () => {
  for (const module of Object.values(modules)) {
    if (module.default.parameters?.excludeTesting) continue;
    describe(module.default.title, () => {
      for (const [exportName, Component] of Object.entries(omit(module, 'default'))) {
        test.concurrent(`${exportName} renders`, () => {
          const renderer = TestRenderer.create(
           // Our own context that is the same as the decorators we use
            <StorybookContext>
              <Component />
            </StorybookContext>
          );
          expect(renderer).toBeTruthy();
          renderer.unmount();
        });
      }
    });
  }
});

[dohooo]

Maybe adding another option that gives a testing runner (vitest) is one solution?

import * as vitest from 'vitest';

shots({
testRunner: vitest
})

Because they have the same APIs.