Testing Visible Text with React Testing Library's getByText Query
Testing Library's ByText methods allow us search the DOM for matching text. We do that here to confirm the total amount is displayed correctly on the page. That search can be narrowed significantly by using the selector option as we do in this example to ensure that only an element showing $0.00 that includes the total class satisfies our query.
The default approach to querying with getByText searches for TextNodes and looks for a matching textContent property. For most advanced searches you can look into the TextMatch options which includes a normalization function and other features to apply more robust searching techniques.
The simpler and more accessible your HTML gets written, the simpler it should to be to query.
Instructor: For this next set of lessons, we're going to be testing our shopping cart page. Go ahead and pull this up. Take a look around and think about all the different things you might want to test on this page. We need to make sure that the total is correct.
We need to make sure that each item has the correct. We need to make sure that each item in our cart plays correctly and that quantity, remove, and checkout all update as expected. Give that a look around and then go back into your code.
Inside of your cart folder, add a new file called cart test.tsx. In this file, we're going to import React from React. We're also going to import screen from React testing library from testing library/react. We're going to import render with context from our test utils.
We're also going to import the cart component from ./cart. With our import setup, type test and empty cart should not have any items. Seems pretty straightforward, right?
Inside of here, we're going to type render with context, cart and below that we'll say, const rows = screen.getAllByRoll row. At first, if we don't have any items, we just have two rows, the header and the footer. We can say, expect rows.two have length two.
Now we need to get this total. For the total, we can say screen.getByText $0.00. Then for options, we can say selector.total. Now let's run our tests here. You can see that, it pass.
You'll notice that I didn't expect on our total here, and that's because screen.getByText will actually throw an error if it doesn't exist. If we rename this selector totally, for example, instead of total, you can see that it would fail with unable to find an element with a text $00.
Similarly, if we set this to $9, and kept the correct selector, and we ran our test, it would continue to fail for the same reason. Let's fix this. We run our tests and we're all set.