preact · Preact Docs
Testing with Preact Testing Library
Teaches how to set up and use the Preact Testing Library to write resilient unit tests by querying the DOM in a user-centric manner rather than relying on implementation details.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
Testing with Preact Testing Library
Teaches how to set up and use the Preact Testing Library to write resilient unit tests by querying the DOM in a user-centric manner rather than relying on implementation details.
When To Use
Use when you need to implement unit tests for Preact components that interact with the DOM using user-centric queries like text content or test IDs.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/preact-testing-with-library-workflow-guide.md | A comprehensive guide covering essentials, debugging, and advanced testing techniques using Preact Testing Library. | Questions about a comprehensive guide covering essentials, debugging, and advanced testing techniques using Preact Testing Library. |
examples/preact-testing-with-library-preact-testing-library-installation-command.text | The npm install command required to add @testing-library/preact to a project as a development dependency. | Exact payloads, commands, or snippets shown in The npm install command required to add @testing-library/preact to a project as a development dependency. |
examples/preact-testing-with-library-preact-testing-library-counter-component.text | A functional Counter component using Preact hooks designed to demonstrate testing patterns with Preact Testing Library. | Exact payloads, commands, or snippets shown in A functional Counter component using Preact hooks designed to demonstrate testing patterns with Preact Testing Library. |
examples/preact-testing-with-library-preact-testing-library-counter-component-tes.text | A test suite demonstrating how to use Preact Testing Library to verify initial state and user interactions on a counter component. | Exact payloads, commands, or snippets shown in A test suite demonstrating how to use Preact Testing Library to verify initial state and user interactions on a count... |
examples/preact-testing-with-library-preact-testing-library-async-render.text | A text example demonstrating an incorrect asynchronous test case where an assertion fails because it does not wait for the component to finish rendering after a click event. | Exact payloads, commands, or snippets shown in A text example demonstrating an incorrect asynchronous test case where an assertion fails because it does not wait fo... |
examples/preact-testing-with-library-preact-testing-library-counter-increment-tes.text | A test case using Preact Testing Library to verify that a counter component increments its value upon a button click. | Exact payloads, commands, or snippets shown in A test case using Preact Testing Library to verify that a counter component increments its value upon a button click. |
examples/preact-testing-with-library-preact-testing-library-sign-in-test.text | A test case demonstrating how to use render, screen.findByRole, and fireEvent to simulate a user signing in with Preact Testing Library. | Exact payloads, commands, or snippets shown in A test case demonstrating how to use render, screen.findByRole, and fireEvent to simulate a user signing in with Prea... |
examples/preact-testing-with-library-preact-testing-library-async-sign-in-test.text | A text-based example demonstrating an asynchronous sign-in test case using Preact Testing Library's render and findByRole methods. | Exact payloads, commands, or snippets shown in A text-based example demonstrating an asynchronous sign-in test case using Preact Testing Library's render and findBy... |
examples/preact-testing-with-library-preact-testing-library-async-signin-test.text | An asynchronous test case demonstrating how to render components and interact with form fields using Preact Testing Library. | Exact payloads, commands, or snippets shown in An asynchronous test case demonstrating how to render components and interact with form fields using Preact Testing L... |
examples/preact-testing-with-library-preact-testing-library-fireevent-click.text | A code example demonstrating how to use fireEvent.click with getByText and getByTestId in Preact Testing Library. | Exact payloads, commands, or snippets shown in A code example demonstrating how to use fireEvent.click with getByText and getByTestId in Preact Testing Library. |
examples/preact-testing-with-library-preact-testing-library-render-debug.text | A code snippet demonstrating how to use the render function and debug utility from Preact Testing Library to inspect the DOM. | Exact payloads, commands, or snippets shown in A code snippet demonstrating how to use the render function and debug utility from Preact Testing Library to inspect... |
examples/preact-testing-with-library-preact-testing-library-render-helper-js.text | A JavaScript helper module that wraps the original render function from Preact Testing Library to simplify vnode rendering. | Exact payloads, commands, or snippets shown in A JavaScript helper module that wraps the original render function from Preact Testing Library to simplify vnode rend... |
examples/preact-testing-with-library-preact-testing-library-usecounter-hook.text | A code example demonstrating how to test a custom useCounter hook using Preact Testing Library. | Exact payloads, commands, or snippets shown in A code example demonstrating how to test a custom useCounter hook using Preact Testing Library. |
examples/preact-testing-with-library-preact-testing-library-renderhook-counter.text | A test case demonstrating how to use renderHook and act from @testing-library/preact to test a custom useCounter hook. | Exact payloads, commands, or snippets shown in A test case demonstrating how to use renderHook and act from @testing-library/preact to test a custom useCounter hook. |
What This Skill Covers
- Guide Version: 11.x (preview) 10.x (current) 8.x
- Main sections:
Introduction,Essentials,Debug & Test,Advanced,Libraries.
Workflow
- Open the most relevant file under
docs/for the exact documented workflow and wording. - Open
schemas/files for exact structured contracts. - Open
examples/files for concrete requests, commands, snippets, and manifests. - Do not add behavior or configuration that is not present in the attached source files.
Canonical source: https://preactjs.com/guide/v10/preact-testing-library