In this video Emmanuel Henri explores the types of tests we can do with Jest's matchers for numbers. Pulling from the data feeding the app he tests for a number of scenarios.
- [Instructor] Now let's move onto Jest. Jest brings dozens of methods to support most of our testing needs. We'll start by using a few methods to test numbers within our application. Let's move onto our editor. First let's fix the annoying warning that we get when we start the application. So let's remove the propTypes. So go into components, listings, and then open up Grid and Single. And inside of those two you have propTypes, so let's remove that, and remove the import of PropTypes, like so.
And the same thing on this one, so let's remove the propTypes and remove the PropTypes import. So with those two fixes you shouldn't see the error anymore. So let's just test that just to make sure, yarn start, and we shouldn't see the error anymore, so we're good. So let's close that. And let's move onto a test. So the first thing you want to do is create a new file called Grid.test.js.
So create a new file in this folder, in listings, and call it Grid.test.js. So the first thing you want to do is import the data. So we'll import the data from our file that sits in the data folder, the courses.json. So you need to exit out of the listings folder and then out of the components folder and then get into the folder data and then load the json data. And then we'll use that data to create a variable, which we'll call numItems, and we'll count the number of items in that array, because if you look back on courses.json you have an array of objects, which are the courses that we see in our browser here.
So if we scroll these are all the courses that are fed from the data. So let's move back to our editor, and back to the Grid.test, and we'll use one of the methods for arrays, which is called length, like so. And then this is where we'll do the test. So the syntax for test is very simple, it's test and inside of that object we'll use, if you remember in one of the previous videos when we tested Jest we saw a title for a test. Well, this is where you put it.
So for this one we'll do Number of items = 12. And let's check that for sure, 'cause I know for a fact that there's 12 objects in there, but let's make sure I didn't add anything before or after. So let's check how many items I have in this particular array. So let's make sure and go to our application, and then go into the React tab, and then check the State. So the State has an array of 12 objects, so we're good. So if I added another one it would be 13 and so on and so forth.
So what we want to do is check that we have 12 objects in our array, so if that's the case then the test will be successful. So you do a , and then a function and this is where you're going to start using some of the methods that we've seen from Jest early on in this video, one of them is called expect, and we expect numItems, so the variable that we just created, so we have a variable that holds the 12, and then simply enough toBe 12.
So this is how easy it is to test with Jest. So if I run this test right now it would be a successful test, because I expect this variable to be at 12. Let's do another one, so let's copy and paste this one, and it would be pretty much the same, so the only thing we need to change is what is the methods that we use from expect and also the title of your test, just to be sure that it's unique. So for this one we expect the Number of items to be greater than 12.
So instead of toBe, it'll be toBeGreaterThanOrEqual, so let's do GreaterThan 12. Save this. So instead of running the server we'll run our Test Suite. So Control + C to exit out of the server and then do yarn test. As you would expect, one has passed, one has failed. And why is that? Because one of our tests expects the number of items to be greater than 12.
And we received a value of 12, but the test expects it to be greater than 12. So let's just change that so it's a successful test. We could do also toBeGreaterThanOrEqual than 12, and then the tests are going to run again, and then it's successful. So as you can see, we have three tests. We have the rendering test from this one here, and we have the two tests that we just created here. So this is how easy it is to create tests based on what you expect for the value.
So if we had a number at 11 here and run the test again then it would be a faulty test. So this is pretty much how it works with the numbers. So you have tons of methods that you could use. So if we go back to our browser and go to Jest, so if you don't know where that is, it's facebook.github.io/jest, and then go into the Docs. So what we're basically using right now is Matchers.
So matchers is a way to test a value to be a value. So it could be also strings, it could be arrays, it could be objects, which we're going to do in a few minutes. But, for example, we testing this expect 2 + 2 to be 4, and so on and so forth. So as you can see, matchers are great to test multiple (mumbling) around numbers, but it doesn't stop there. So next we'll explore matchers with strings.
- Setting up for React testing and debugging
- Testing with Jest
- Snapshot testing
- Debugging with Chrome and Chrome extensions
- Optimizing React code and app performance