Queries, Events, Assertions — Forms & Async UI
Use getBy/findBy queries, user-event for typing/clicks, and jest-dom assertions. Test forms and async screens with confidence.
Queries, Events, Assertions — Forms & Async UI is a free React Academy lesson on CoddyKit — lesson 2 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
User-focused testing
Goal: Test like a user.
- Queries: getBy*/findBy*
- Events: user-event (click, type)
- Assertions: jest-dom
Queries: pick the right one
- getBy*: sync; fails if missing
- findBy*: async; waits
- queryBy*: returns null when missing
- Prefer role/label over test IDs
Demo: accessible login form
Form with labels and submit button. Ideal for getByLabelText, getByRole, and user typing.
<div id="root"></div>
Demo: async list (loading → items)
Simulated async fetch: shows a loader then renders items. Tests should use findBy* or waitFor.
<div id="root"></div>
Assertions & events
- toBeInTheDocument, toBeDisabled, toHaveTextContent
- Use findBy* for async UI
- Prefer user-event over fireEvent
Patterns & gotchas
Patterns:
- Arrange → Act (user-event) → Assert
- Async: await findBy* or waitFor
- Avoid arbitrary timeouts; keep tests fast
Async assertion best practice
Recap
Recap: Prefer role/label queries, drive UI with user-event, and assert with jest-dom. For async UI, await findBy* or wrap in waitFor.
Frequently asked questions
Is the “Queries, Events, Assertions — Forms & Async UI” lesson free?
Yes — the full text of “Queries, Events, Assertions — Forms & Async UI” is free to read here on the web, and the React Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.
What will I learn in “Queries, Events, Assertions — Forms & Async UI”?
Use getBy/findBy queries, user-event for typing/clicks, and jest-dom assertions. Test forms and async screens with confidence. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start React Academy?
No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “Queries, Events, Assertions — Forms & Async UI” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this React Academy lesson?
Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- React Testing Library + Vitest/Jest Setup
- Queries, Events, Assertions — Forms & Async UI
- Mocking Fetch & Timers