Testing react applications for professional engineers

Mount a custom checkbox component with ReactDOM into a container, pass appropriate props, and verify the label and checkbox input exist using container queries and assertions.

Learn to test a checkbox with the react testing library by rendering the component, using get by label text for accessible labels, and validating the element in the document.

Learn to fire native events on elements with a testing library, simulating checkbox clicks and validating the on change handler is called.

Learn how to test checked and unchecked checkbox states in React by mounting the component, spreading default props, and passing custom props to verify true or false.

Learn to automate accessibility testing for react components by validating labels linked with inputs and images, using an accessibility library to detect violations and guide fixes.

Learn to find elements in React tests using getByText and getByAltText, ensuring the product name, price, and image alt text render correctly.

Learn how to test for the absence of an image using query, ensuring no rendering, and differentiate from get or find for presence using a test id.

Wrap the header in a context provider to supply the toggle value, render the header in tests, and verify clicking the future button calls the context toggle method.

Test array rendering elements by mounting a product stream that maps over dummy products array, uses a test id, and asserts get all by test returns elements matching default products.

Test the parent component that renders children by verifying it provides the context values to the future context provider and renders its children.

Test context provider values by consuming the context, rendering with wrappers, and simulating user interactions to verify that injected state toggles user interface elements correctly.

Test the toggle scroll behaviour by clicking the future button to freeze and unfreeze the body scroll, asserting the overflow switches between hidden and visible.

Test the use filters hook by mounting a context provider with a known value, rendering a component that uses the hook, and asserting the value matches the provided context.

Test the use outside click hook by mounting a panel component that uses it. Simulate inside and outside clicks and verify the callback toggles panel visibility.

Explore testing hook cleanup by simulating mounting and unmounting a panel, toggling visibility, and spying on document.removeEventListener to verify cleanup occurs after unmount.

Conduct an integration test that mounts the app with the store and providers, mocks the API fetch for products, and verifies two product tiles render from the mocked data.

Learn to generate robust test data for React applications using the test-data-bot library. Build products with fake id, name, image, lorem text, and prices to keep tests flexible and reliable.

Demonstrates integrating tests for an off-canvas search panel, validating open and close flows and element presence using get by text and query by text.

Test product search functionality in a React app by mounting the component, typing in the search box with a debounce, and validating debounced API calls and item updates.

Learn to test drive and react in a practical workflow, review final and previous source code, and use lesson-specific change links to follow updates.

Learn to test router dependent header components with a memory router by providing location and Redux contexts, and update mocks to handle three API calls for stable tests.

Test a component with the use location hook by mounting it in a memory router with initial entries and initial index to simulate the home page and verify future button.

Test a react app feature that navigates from a product list to a single product page by mocking API responses, validating the loaded product details and page navigation.

Test add product to cart by mounting the product detail page, mocking get and post API endpoints, and validating the top cart count, removal, and product details rendering.

Test the checkout flow in a React app by mocking API endpoints, simulating Stripe token creation from card input, and posting to the backend, then verify redirect to the homepage.