TodayTools

Component testing flashcards

Render one piece of UI and test it the way a user would: by role, by label, by what changes on screen.

Donate
Beginner friendly, starts from zero
Section
How to study
0
Component testingStart from zero · 1 of 12

What is testing, in one plain sentence?

A test is a small program that checks one piece of a screen, like a sign-up form, works the way a person would use it.

Test one Lego brick before you build the castle.

All topics

Component testing at a glance

Component testing means writing small programs that check one piece of a screen works the way a person uses it.

Like switching on each car headlight on a test bench before it is fitted, so a fault points at that exact part.

Words you will meet

Component
One reusable piece of a screen, like a button or a form
Render
Turn a component's code into things on the page
DOM
The browser's live tree of everything on the page
Assertion
The check in a test, like 'expect this button to be enabled'
Test runner
The tool that runs all your tests and shows pass or fail
Role
What an element is, like button or heading
Accessible name
The name a screen reader says for an element, like Email
Props
The settings you pass into a component

The steps

  1. 1. Start from zero (12 cards): What a component test is, the words you need, and your first tiny test.
  2. 2. Core basics (15 cards): Render, query by role, click like a user, and assert on what people actually see.
  3. 3. Next steps (16 cards): Typing, callbacks, async UI, providers, network mocks and debugging queries.
  4. 4. Go deeper (16 cards): Real-browser runs, accessibility checks, stories as tests, hooks, timers and strategy.
All 12 cards in Start from zero
What is component testing, in one plain sentence?
A component test is a small program that checks one piece of a screen, like a sign-up form, works the way a person would use it.
Before these tests, how did people check that a form still worked?
Someone opened the whole app and clicked through by hand after every change. It was slow, and the odd cases, like the error message, were easy to forget.
Where do you already meet the results of component tests?
The login box, the Add to cart button and the search field in apps you use every day. Teams test pieces like these so a small change does not quietly break them.
What everyday check is a component test most like?
A factory switching on each headlight on a test bench before it goes into a car. If it fails there, you know exactly which part is bad.
What do 'UI', 'component' and 'framework' mean?
UI (user interface) is everything you see and touch on screen. A component is one reusable piece of it, like a button or a form, built with a framework: a ready-made toolkit such as React.
What do 'DOM', 'element' and 'render' mean?
The DOM is the browser's live tree of everything on the page, and each item in it, like a button, is an element. To render is to turn a component's code into those elements.
What are a 'test', an 'assertion' and a 'test runner'?
A test is a small piece of code that sets something up and checks the result. The check itself is an assertion, like 'expect the button to be enabled'. A test runner, such as Vitest, runs every test and shows pass or fail.
What do 'screen reader', 'role', 'label' and 'accessible name' mean?
A screen reader reads the page aloud for people who cannot see it. It knows each element by its role (button, heading, textbox) and its accessible name, often taken from a label like Email.
What are 'props' and 'state', and why will tests mostly leave them alone?
Props are the settings you pass into a component, like status="shipped". State is what it remembers inside, like whether a menu is open. Users never see either, so tests check the screen instead.
What do you need before starting this topic?
Some comfort reading JavaScript and HTML. To run the examples you need Node (it runs JavaScript on your computer) and a project with Vitest and Testing Library installed; for the ideas, nothing at all.
Your first tiny win: what does this test do?
Line 1 says render the component with a name. Line 2 uses screen to find text on the page and expects it to be in the document; if it is missing, the test fails.
What will you be able to do after this topic?
Write tests that render a component, click and type like a user, and check what appears. You will also know which tests to skip, and how to keep tests fast and trustworthy.
Component testing cheatsheet

Queries in priority order

  • getByRole("button", { name: /save/i }) Best: role plus accessible name
  • getByLabelText("Email") Form fields by label
  • getByPlaceholderText("Search") When no label exists
  • getByText(/order placed/i) Non-interactive text
  • getByDisplayValue("600017") Field by current value
  • getByAltText("Product photo") Images
  • getByTestId("sales-chart") Last resort

Variants and helpers

  • getBy / getAllBy Must exist now, throws
  • queryBy Returns null, for absence
  • await findBy Waits until it appears
  • within(row).getByRole(...) Scope to one element
  • await waitFor(() => expect(...)) Retry an assertion
  • waitForElementToBeRemoved(fn) Wait for removal
  • screen.debug() / logRoles(el) See DOM and roles

user-event v14

  • const user = userEvent.setup() Create before render
  • await user.click(el) Full click sequence
  • await user.type(el, "text") Type key by key
  • await user.clear(el) Empty a field
  • await user.keyboard("{Enter}") Press keys
  • await user.tab() Move focus
  • await user.selectOptions(el, "UPI") Pick from a select
  • userEvent.setup({ advanceTimers: vi.advanceTimersByTime }) Works with fake timers

jest-dom matchers

  • toBeInTheDocument() Present in DOM
  • toBeVisible() Present and not hidden
  • toBeDisabled() / toBeEnabled() Interactive state
  • toHaveValue(2) Input value
  • toHaveTextContent("Rs 1,499") Text inside element
  • toHaveFocus() Currently focused
  • toHaveAccessibleDescription("...") Linked help or error text
  • toBeChecked() Checkbox or radio state

Setup

  • environment: "jsdom" Vitest DOM in Node
  • setupFiles: ["./test/setup.ts"] Load matchers and MSW
  • import "@testing-library/jest-dom/vitest" Register matchers
  • browser: { enabled: true, provider: playwright() } Real browser mode
  • queries: { retry: false } Fast React Query errors
Donate