Skip to main content

React Testing Library

Query Selectors

cheatsheet

SELECTORNo Match1 Match1+ MatchAwait?
queryBynullreturnthrowNo
getBythrowreturnthrowNo
findBythrowreturnthrowYes

queryBy use only to check the non-existence of an element.

getBy use when you expect an element to be available, otherwise the test should fail.

findBy is similar to getBy but it waits up to a timeout period (default is 1000ms) for the element to appear. Use when data must be fetched to show the element. These queries are asynchronous so need to use await.

Flow

Write out test plan.

//Product.spec.tsx
test("shows the correct name", () => {});
test("shows the correct color", () => {});
test("shows the correct price", () => {});
test("shows the correct quantity", () => {});
test("shows the discounted price", () => {});
test("does not show the discounted price", () => {});
test("disables the decrease button when the quantity equals 1", () => {});

Resources

URLNotes
React Testing Library
maciekgrzybek.dev
GithubNotes
React Testing Starter