Docs: Add afterEach guidance

[kylegach]

What I did

Add guidance for the afterEach function

Checklist for Contributors

Testing

Manual testing

1. Sync this branch with locally running docs

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

Greptile Summary

This PR adds comprehensive documentation for the afterEach function in Storybook's interaction testing capabilities. The changes include:

Main Documentation Updates:

• Added a new section in docs/writing-tests/interaction-testing.mdx explaining the afterEach lifecycle hook
• Documents that afterEach runs after story rendering and play function completion
• Explains the function can be used at project, component, or story levels
• Provides clear guidance on appropriate use cases (post-interaction assertions, accessibility checks, logging)
• Includes an important warning against using it for state resets, which could interfere with test result visibility

Code Examples:

• Created docs/_snippets/after-each-in-meta.md with comprehensive examples across all supported frameworks
• Follows Storybook's established multi-framework documentation pattern
• Includes examples for Angular, Svelte (both CSF and traditional), React, Vue, and Web Components
• Provides both JavaScript and TypeScript variants consistently
• All examples demonstrate basic logging functionality to show the API usage

The documentation integrates well with Storybook's existing testing infrastructure, as evidenced by the afterEach function already being used internally by the a11y addon for accessibility testing. This PR fills a documentation gap for a feature that exists and is actively used within Storybook's ecosystem, making it available for end users who need post-interaction testing capabilities.

Confidence score: 5/5

• This is a documentation-only PR that is extremely safe to merge with no risk of breaking production code
• The documentation follows established patterns and conventions used throughout the Storybook codebase
• All code examples are consistent, well-formatted, and demonstrate the API correctly across multiple frameworks
• No files requiring more attention

Context used:

Context - When documenting code snippets, ensure to include Svelte CSF and CSF examples, and also include JS and TypeScript variants. (link)

[greptile-apps]

_{2 files reviewed, 1 comment}

_{Edit Code Review Bot Settings | Greptile}

[greptile-apps]

style: Inconsistent emoji usage - only the web-components JS example includes ✅ emoji while others don't

Suggested change

	async afterEach(context) {
	console.log(`✅ Tested ${context.name} story`);
	},
	async afterEach(context) {
	console.log(`Tested ${context.name} story`);
	},

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 8a3bc56

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	1m 13s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-08-05 16:46:01 UTC

[Stadly]

You mention running accessibility tests in afterEach. How can I do that? My impression is that I cannot control at which time a11y tests are run using the a11y addon.

[kylegach]

@Stadly — I only included that as an example of what could be done. However, that's probably more confusing than helpful, as we already have a way to do a11y checks: addon-a11y.

I've changed the explanation to avoid that confusion.

Fwiw, addon-a11y itself uses beforeEach to run the checks.