How to Test a Checkout Product List React Component
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass with a single-time purchase.
[00:00 - 00:07] Checkout list component. The checkout list component renders the list of products above the checkout form.
[00:08 - 00:13] It has only one task to render the list of products, so it better do it well. So let's test it.
[00:14 - 00:20] Create a new file, as you see. Checkout, checkout, list spec, TSX.
[00:21 - 00:32] Add the top level describe for the checkout list component and it must render the list of products. It to do renders the list of products.
[00:33 - 00:44] So here we're going to test that the products that we pass to this component will be rendered correctly. First, we define the product smoke.
[00:45 - 00:55] Cons products, it's an array of type product. Here define two objects, name product full price, 10, image, image, PNG.
[00:56 - 01:03] And another one, product bar, price 10, image, also image PNG. Render the checkout list.
[01:04 - 01:21] Cons container equals render, checkout list, passing the products. And then expect that the container inner HTML will match the product names, product full and product bar.
[01:22 - 01:35] If we look at the product list implementation, you will see that the only functionality that it has, it just takes the products from the props and renders them as a list. And we've successfully tested our checkout list.