React Testing Library
Query Selectors
| SELECTOR | No Match | 1 Match | 1+ Match | Await? |
|---|---|---|---|---|
| queryBy | null | return | throw | No |
| getBy | throw | return | throw | No |
| findBy | throw | return | throw | Yes |
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
| URL | Notes |
|---|---|
| React Testing Library | |
| maciekgrzybek.dev |
| Github | Notes |
|---|---|
| React Testing Starter |