provide better example for async snapshot testing

[macrozone]

Is your feature request related to a problem? Please describe.

the readme of storyshots mentions a way to do async snapshot testing, e.g. if you use apollo or siilar: https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core#storyshots-for-async-rendered-components

There are two problems with that example:

• it uses enzyme, while default storybook uses react-test-renderer. If you just migrate to that solution, all your snapshot will be different
• enzyme-to-json will render all properties (at least im my case). This is not what you want, you want to diff the resulting html. it also seems to run out of memory on larger stories. I think this is because i use a decorator that provides the apolloclient

Describe the solution you'd like

I'd like to see a way to configure this async rendering with the default storybook renderer

Describe alternatives you've considered

Houff... i tried many things... Best solution so far is this (using diffable-html and enzym's html())

import initStoryshots, { Stories2SnapsConverter } from "@storybook/addon-storyshots";
import { shallow, mount } from "enzyme";
import { act } from "react-dom/test-utils";
import "jest-styled-components";
import toDiffableHtml from "diffable-html";
import preloadAll from "jest-next-dynamic";

beforeAll(async () => {
  await preloadAll();
});

const waitForNextTick = () => new Promise((resolve) => setTimeout(resolve));

initStoryshots({
  asyncJest: true,
  test: async ({ story, context, done }) => {
    const converter = new Stories2SnapsConverter();
    const snapshotFilename = converter.getSnapshotFileName(context);
    const storyElement = story.render();
    const tree = mount(storyElement);
    await act(async () => {
      await waitForNextTick();
    });
    tree.update();
    if (snapshotFilename) {
      expect(toDiffableHtml(tree.html())).toMatchSpecificSnapshot(snapshotFilename);
    }
    done();
  },
});

I hope that if async rendering lands in react, these problems will be solved...

Are you able to assist bring the feature to reality?

yes, but i want to gather better solutions here (if any) first.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[krishnaglick]

Would love a better solution for this!

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[macrozone]

no! bad stale-bot!

...

ok, you are just doing your job... but... has no one in the whole storybook-comunity found a better way for asyns snaphost testing? :-/

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[krishnaglick]

Bumping this, bloody stalebot.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[macrozone]

no! stalebot! we are not done here!

[macrozone]

i want to bump this because i can't believe that there is no better way. I am looking for a solution for over a year now and i am very astonished that no one came up with a solution.

my workaround has a lot of downsides, e.g. jest-styled-components does not work with it and the diff is slow and hard to parse.

[krishnaglick]

https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-puppeteer
Looks like this could work for it. I spent a little bit of time trying to but ran into trouble. May revisit when I've got more time.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[krishnaglick]

Bump

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[macrozone]

shoo stale bot

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[rodgoeliz]

Does this seem reasonable?

import initStoryshots, { Stories2SnapsConverter } from '@storybook/addon-storyshots'
import { act, create } from 'react-test-renderer'

const converter = new Stories2SnapsConverter()

initStoryshots({
  asyncJest: true,
  test: async ({ story, context, done }) => {
    const filename = converter.getSnapshotFileName(context)

    if (!filename) {
      return
    }

    // render the component
    const renderer = create(story.render())

    // wait for state changes, wrapped in act
    await act(() => new Promise((resolve) => setTimeout(resolve)))

    expect(renderer.toJSON()).toMatchSpecificSnapshot(filename)

    renderer.unmount()

    done()
  },
})

Seems okey by me, thank you. you are awesome.
I think these are the types.

import initStoryshots, { Stories2SnapsConverter } from '@storybook/addon-storyshots';
import { StoryContext } from '@storybook/react/types-6-0';
import { act, create, ReactTestRenderer } from 'react-test-renderer';

const wait = () => act(() => new Promise((resolve) => setTimeout(resolve, 10)));

const converter = new Stories2SnapsConverter();

const runTest = async (story: StoryContext, context: StoryContext) => {
  const filename = converter.getSnapshotFileName(context);

  if (!filename) return;

  const storyElement = story.render();
  let tree: ReactTestRenderer | undefined;
  act(() => {
    tree = create(storyElement) as ReactTestRenderer;
  });

  await wait();

  expect(tree?.toJSON()).toMatchSpecificSnapshot(filename);
  tree?.unmount();
};

initStoryshots({
  asyncJest: true,
  test: ({ story, context, done }) => {
    runTest(story, context).then(done);
  },
});

[macrozone]

problem is, that toJSON is not a good idea as it may contain also code from the decorator of the story (and in my case completly breaks because of memory problem).

the default does not seem to use toJSON, i could not figure out how the default works. We just need to have the default snapshot mechanism with the additional wait()

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[corbinasapp]

Stalebot no!

[Nerlin]

In case someone will need it, here's an example how we run async snapshot tests in our project using react-testing-library and msw:

import initStoryshots from "@storybook/addon-storyshots";
import { act, render } from "@testing-library/react";
import { setupServer } from "msw/node";

initStoryshots({
  asyncJest: true,
  test: async ({ story, context, done }) => {
    const endpoints = context.parameters.msw ?? [];
    const server = setupServer(...endpoints);
    server.listen();

    try {
      const jsx = story.render();
      const { unmount, rerender, container } = await render(jsx);

      // wait for state changes
      await act(() => new Promise((resolve) => setTimeout(resolve)));

      await rerender(jsx);
      expect(container).toMatchSnapshot();

      unmount();
      done!();
    } finally {
      server.close();
    }
  },
});

[macrozone]

In case someone will need it, here's an example how we run async snapshot tests in our project using react-testing-library and msw:

import initStoryshots from "@storybook/addon-storyshots";
import { act, render } from "@testing-library/react";
import { setupServer } from "msw/node";

initStoryshots({
  asyncJest: true,
  test: async ({ story, context, done }) => {
    const endpoints = context.parameters.msw ?? [];
    const server = setupServer(...endpoints);
    server.listen();

    try {
      const jsx = story.render();
      const { unmount, rerender, container } = await render(jsx);

      // wait for state changes
      await act(() => new Promise((resolve) => setTimeout(resolve)));

      await rerender(jsx);
      expect(container).toMatchSnapshot();

      unmount();
      done!();
    } finally {
      server.close();
    }
  },
});

wow that actually works much better and only takes a litte more then half the time of my previous implementation, thank you very much!

[millermedeiros]

since none of the solutions above worked for my repository — React.createElement is required for hooks to work as expected, can't call story.render() directly — I wrote these two solutions:

import React from 'react';
import { create, act } from 'react-test-renderer';
import initStoryshots from '@storybook/addon-storyshots';
import wait from 'waait';

initStoryshots({
  asyncJest: true,
  test: async ({ story, done }) => {
    let renderer;
    act(() => {
      // React.createElement() is important because of hooks [shouldn't call story.render() directly]
      renderer = create(React.createElement(story.render));
    });

    // Let one render cycle pass before rendering snapshot
    await act(() => wait(0));

    // save all snapshots to the same file (similar to "snapshotWithOptions")
    expect(renderer).toMatchSnapshot();

    done();
  }
});

Or if you want to save the snapshots to multiple files (similar to multiSnapshotWithOptions):

import React from 'react';
import { create, act } from 'react-test-renderer';
import initStoryshots, { Stories2SnapsConverter } from '@storybook/addon-storyshots';
import wait from 'waait';

const converter = new Stories2SnapsConverter();

initStoryshots({
  asyncJest: true,
  test: async ({ story, context, done }) => {
    let renderer;
    act(() => {
      // React.createElement() is important because of hooks [shouldn't call story.render() directly]
      renderer = create(React.createElement(story.render));
    });

    // Let one render cycle pass before rendering snapshot
    await act(() => wait(0));

    // save each snapshot to a different file (similar to "multiSnapshotWithOptions")
    const snapshotFileName = converter.getSnapshotFileName(context);
    expect(renderer).toMatchSpecificSnapshot(snapshotFileName);

    done();
  }
});

PS: tested this on @storybook/react@6.1.18 and @storybook/addon-storyshots@6.1.18; some components using @apollo/react-hooks@4.0.0 and @apollo/react-testing@4.0.0 MockedProvider; and some components using regular hooks like useState, useEffect and useContext.

[froleo]

@millermedeiros Thank you! This helped me enable async testing and get rid of "Component is not wrapped in act" errors from my tests.

@annaloukianova I was using createNodeMock to fix Material UI Dialog related warnings in my previous setup,
this solution works for me in combination with async testing:

import React from "react";
import ReactDOM from "react-dom";
import initStoryshots, {
  Stories2SnapsConverter,
} from "@storybook/addon-storyshots";
import { create, act } from "react-test-renderer";
import wait from "waait";
import "regenerator-runtime/runtime";

// Mock fetch
require("jest-fetch-mock").enableMocks();

//Fix portal / fade related issues
ReactDOM.createPortal = jest.fn((element, node) => {
  if (!element.style) {
    return React.cloneElement(element, { style: { webkitTransition: "" } });
  }
  return element;
});

jest.mock("@material-ui/core/Fade");
jest.mock("@material-ui/core/Zoom");

const converter = new Stories2SnapsConverter();

initStoryshots({
  asyncJest: true,
  test: async ({ story, context, done }) => {
    let renderer;
    act(() => {
      // React.createElement() is important because of hooks [shouldn't call story.render() directly]
      renderer = create(React.createElement(story.render), {
        // Fix Portal / MUI Dialog issues
        createNodeMock: (node) => document.createElement(node.type),
      });
    });

    // Let one render cycle pass before rendering snapshot
    await act(() => wait(0));

    // save each snapshot to a different file (similar to "multiSnapshotWithOptions")
    const snapshotFileName = converter.getSnapshotFileName(context);
    expect(renderer).toMatchSpecificSnapshot(snapshotFileName);

    done();
  },
});

[armordog]

It's been a couple of years now.
Is Storyshots deprecated?
Or am I just supposed to avoid using it with anything that has state?

Edit: Sorry for my bitchy tone.
I know this problem isn't on purpose and I appreciate the work everyone has put into storybook and storyshots.

[shilman]

@armordog we're planning an overhaul of storyshots as part of the 6.x/7.0 cycle

[chris-jalon]

thank you to contributors in this thread.
@froleo much appreciated! this is needed to run storybook tests on components with state that use material ui.

also,
await act(() => wait(0));
can be replaced with:
await act(async () => {});
removing the need for the waait dependency.

@shilman is the intent to remove needless boilerplate like that posted above? specifically createNodeMock: (node) => document.createElement(node.type) which seems essential for Material-UI and use of act to prevent React lifecycle errors?

[shilman]

the focus of the overhaul is to make global test running more efficient and transparent.

we have a jest transform that converts a story file into a jest file with one test per story. the contents of each test is specified globally by the user, as is done today. the difference is that you can run jest tests (1) in parallel, (2) on a filtered set of files from the CLI, (3) only on changes since the last commit, etc.: all the stuff that jest is great at.

what goes inside the test function? we don't have any plans to automagically fix any of the issues above. however, with the renewed focus on testing we'll provide a set of zero-config best practices and recipes for common tasks, and you can expect more to come as we develop this neglected area of storybook.

[macrozone]

the focus of the overhaul is to make global test running more efficient and transparent.

we have a jest transform that converts a story file into a jest file with one test per story. the contents of each test is specified globally by the user, as is done today. the difference is that you can run jest tests (1) in parallel, (2) on a filtered set of files from the CLI, (3) only on changes since the last commit, etc.: all the stuff that jest is great at.

what goes inside the test function? we don't have any plans to automagically fix any of the issues above. however, with the renewed focus on testing we'll provide a set of zero-config best practices and recipes for common tasks, and you can expect more to come as we develop this neglected area of storybook.

that sounds really promising!

[FokkeZB]

@Nerlin I've tried your solution for @testing-library/react in #7745 (comment), but for some reason the tests timeout - the await act() never resolves. Any idea?

[thienna]

same as @FokkeZB

[ndelangen]

I think the answer is in here:
https://storybook.js.org/docs/react/writing-tests/test-runner#page-top

Together with:
https://storybook.js.org/docs/react/writing-stories/play-function#page-top