How to Test a Checkout Product List React Component
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.