Add setPreRender/setPostRender hooks & example

[shilman]

What I did

• Added test lifecycle hooks
• Added image snapshotting example & snapshots
• Added initial documentation
• Aligned stories.json/CSF mode behavior

setPostRender(async (page, context) => {
  const image = await page.screenshot();
  expect(image).toMatchImageSnapshot({
    customSnapshotsDir,
    customSnapshotIdentifier: context.id,
  });
});

How to test

yarn build
yarn test-storybook:playwright
# edit a component story
yarn test-storybook:playwright

📦 Published PR as canary version: 0.0.2-canary.38.ad367be.0

✨ Test out this PR locally via:

npm install @storybook/test-runner@0.0.2-canary.38.ad367be.0
# or 
yarn add @storybook/test-runner@0.0.2-canary.38.ad367be.0

Version

Published prerelease version: v0.0.2-next.7

Changelog

🐛 Bug Fix

• Add setPreRender/setPostRender hooks & example #38 (@shilman @yannbf)
• Add CLI wrapper #41 (@yannbf)
• Cleanup play function checks #37 (@yannbf)
• Support auto title stories #35 (@yannbf)
• Add stories.json support #31 (@shilman)
• Add test runner to ci #26 (@yannbf @shilman)
• Update ci recipes and timeout feedback #27 (@yannbf)
• fix: move test-runner default configuration location and resolution #25 (@yannbf)

⚠️ Pushed to next

• Update linear-export.yml (@shilman)

📝 Documentation

• docs(README): add section about jest #29 (@yannbf)

Authors: 2

• Michael Shilman (@shilman)
• Yann Braga (@yannbf)

[p01]

Any chance to extend userEvent from @storybook/testing-library to enable to take screenshots throughout the play function, and not just as a preRender/postRender hook ? Or do you see this as something out of scope for the default feature set of Storybook/test-runner ?

This is something we have built into Storywright ( this is mostly used internally and haven't focused on public docs so far ) but I am very happy to see Storybook/test-runner and would rather work together on a solution that works for the broader community.

[shilman]

@p01 Thanks for reaching out and very nice to meet you! Storywright looks really cool--it's the first time I'm seeing it. I'd love to learn more about where you're going with it, talk through what we're aiming for with the test runner, and figure out how we might collaborate. Any interest in doing a call in the next couple weeks?