docs: prefer userEvent in unit test examples

[rohanadepu]

What

Update the stories-in-unit-tests examples to prefer userEvent.setup() and await user.click(...) over fireEvent.click(...).

Why

Testing Library recommends userEvent for interactions that model user behavior. This also makes the unit-test examples more consistent with Storybook interaction testing, where userEvent is provided to play functions.

How

• Replaced fireEvent imports/usages in the unit-test snippets with @testing-library/user-event
• Kept screen queries in the unit-test examples because composed stories run inside the external test renderer
• Added a short note explaining when to use screen vs the canvas queries provided to play functions

Issue

Fixes #31868

Validation

• corepack yarn docs:check
• corepack yarn fmt:check docs/_snippets/component-test-with-testing-library.md docs/_snippets/single-story-test.md docs/_snippets/multiple-stories-test.md docs/writing-tests/integrations/stories-in-unit-tests.mdx

Summary by CodeRabbit

• Documentation
  • Updated testing documentation snippets to replace fireEvent.click() with @testing-library/user-event for improved interaction testing.
  • Added clarification on which Testing Library query APIs to use when testing stories in unit tests, with guidance on using screen for provided examples and canvas queries within story play functions.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 6077bb47-8946-4902-a0ce-a7d710995813

📥 Commits

Reviewing files that changed from the base of the PR and between b9549a6 and 85b0a07.

📒 Files selected for processing (4)

• docs/_snippets/component-test-with-testing-library.md
• docs/_snippets/multiple-stories-test.md
• docs/_snippets/single-story-test.md
• docs/writing-tests/integrations/stories-in-unit-tests.mdx

---

📝 Walkthrough

Walkthrough

Documentation updates replace fireEvent.click() with @testing-library/user-event interactions across multiple testing snippet examples. Files import userEvent, initialize via setup(), and use async await user.click() patterns. Documentation clarification added for Testing Library query API usage in unit tests.

Changes

Cohort / File(s)	Summary
Test Snippet Updates docs/_snippets/component-test-with-testing-library.md, docs/_snippets/multiple-stories-test.md, docs/_snippets/single-story-test.md	Replaces fireEvent.click() with await user.click() across all framework variants (React/Vue, JS/TS). Removes fireEvent from imports, adds userEvent imports and userEvent.setup() initialization in test blocks.
Testing Documentation docs/writing-tests/integrations/stories-in-unit-tests.mdx	Adds clarification on Testing Library query API usage: recommends screen queries for unit tests and canvas queries within story play functions for proper scope.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[valentinpalkovic]

Hi @rohanadepu,

Due to a recent high volume of unreviewed AI-generated PRs, we are requesting verification and proof that the implemented fix actually works. Please provide a simple GIF/Video or image of how the fix works, optimally with before-and-after comparisons.

Thank you for your understanding!

[rohanadepu]

Hi @valentinpalkovic, absolutely. Thanks for explaining.

Here is a quick VS Code capture showing the before/after diff for the affected docs snippet:

This PR is docs-only. The relevant change is replacing the fireEvent.click(...) examples with userEvent.setup() + await user.click(...), and adding the clarification that external unit tests can use Testing Library screen queries while story play functions should prefer scoped canvas queries.

I also verified locally with:

• corepack yarn docs:check
• corepack yarn fmt:check docs/_snippets/component-test-with-testing-library.md docs/_snippets/single-story-test.md docs/_snippets/multiple-stories-test.md docs/writing-tests/integrations/stories-in-unit-tests.mdx
• git diff --check

[kylegach]

Thanks, @rohanadepu! Appreciate it. 🙂