React Testing Library Tutorial #7 - Using Query Methods

let's finally write our first tests and we're going to be writing a very simple unit test that's going to test the functionality of one component in isolation and we're going to test this and explore all of the different methods that we can utilize to query for a specific element now the component that we are going to be testing is a very simple one for our first test and it is this component right here this is actually a header component and the text that is being rendered is being passed as a prop by the parent component so over here to do is the prop but if i go to followers then followers will be the prop so what we are going to do is we're going to see hey this component if we pass it a specific prop does it render that text appropriately and correctly so we're going to be testing the functionality of this component all right so let's actually go in here and let's find that component so that component is inside of the component directory in the source directory and it is the header so if we take a look at the header very very simple all it is is an h1 that is displaying the text that was passed in as a prop that it that's all it is doing and actually if i go to to do that renders that component then you can see header and it passes to do as a title prop very very simple and so this is what we will be testing and we're going to be looking at all of the different methods that we can utilize to get this specific element okay so let's begin with it now we want to create a test file for this component now the typical convention is to go to the directory where your component lives and create a underscore underscore test underscore underscore folder and in here you're going to create the header dot test dot js file so test dot js file and that is going to be your test you can see that react testing library is using that now it is going to fail ultimately because we don't have any tests so let's let's actually go ahead and let's copy all of this and let's delete this a test because uh because it's it's it's always going to fail which is going to be pretty annoying and let's just paste this in here and let's just change a bit of things so for instance here we want to use the header component so the header component that lives up a directory header.js and over here we want to use header and here we're going to be looking for the h1 element so you can say heading element so heading element instead of link element and now what we can do is let's get it by text let's actually just utilize get by text so the header is actually going to be taking in a prop so we can say title and then we can say that the title is equal to let's say to do's or you know what my header so my header so whatever my header is so i am going to expect that i can get a heading element by uh by by getting it by text where the text is my header and this is a regular expression so we can leave everything lowercase if we want to and so if i were to go ahead and save this you can see that it has passed and so you can see that we actually got our header element or our heading element and that was in the document now if i did something like um by cats or cars i guess cats let's do cats then it is going to fail if i passed in cats as the prop then or cats in the as they props then it is going to pass and so we see here that our component is working exactly the way that we want it to so let's actually go ahead and let's just change this to my header and over here my header and let's basically change our our title in the block on the test block so we're going to change it to should render same text passed into title prop so that is going to describe our test and i'm also going to change this to it instead of test because i like using it blocks rather than test blocks okay so that is one way that we can test for our component and this is a completely valid unit test that is testing this particular unit right here all right so now let's start talking about some of the different methods that we can utilize so let's actually copy this test block and remember we can have multiple tests inside of our application if i actually save this then we see here two tests passed and all of them are associated with the tests in this file so now what we want to do is we want to start using some of the different methods that we can use to get a specific element so let's say here let's get the element by something else and let's get it by its role so get by roll and the role of this element so the role of this element is well to be a heading so we are going to get by role and then you can see all of the different roles that we can utilize form whatever it is that you want you can always read the documentation to figure out which one it is you can see here paragraph that's probably going to be related to a p tag search box whatever but we are going to be using heading and so if i were to save this then it is going to pass now remember if i pick something else that doesn't exist like paragraph let's say paragraph does exist as a viable role but there is no element that follows that role paragraph so you can see here that it fails remember when we use get by the thing fails if it can't find a match so over here we're going to say heading so head ing all right so now let's move on to the next one and in this one we're going to explore get by roll a little bit more so let's say that we have let's actually go to our header actually we already have that open and let's say that we have two headers in here so i'm gonna go ahead and i'm just going to uh display two headers let's let's let's let's put in a fragment and over here i'm going to put in one header and then over here i'm going to put in an h3 and this h3 let's also give it a class name of header and let's go ahead and let's just say cats for instance so this is just it holds the text cats so this is all this is going to cause one of our tests to fail and i want you to take a guess as to which test failed here so remember this one we didn't save it so this one doesn't exist yet so which one failed well the one that failed is this one and the reason why is because there are two elements there are two elements that match this condition and so this is not what we want we always want to find an element that we want to use the condition that finds one element so what we can do with get by role is specify the text that we want to get so we want to get by the heading but we also want the text of my header over cats so we can do that by specifying an object and then saying the name the name is basically the text and then we can say in here my header so let me just quickly comment this out because this one will always fail and now if i refresh this so we are getting by the heading and then we're getting by the text this is a very good approach get by role because it really mimics what the user is going to do they're going to look for the heading and they're going to look for the specific text but now let's start exploring some of the other ones so let's start talking about some of these semantic ones so let's go here and let's say let's say get by title so get by title and the title let's say that the title is header now if you don't know in html we can also specify a title attribute and we can say that hey this is a header now ultimately the user is going to have no idea that this title exists in this html element but we can also query by it if we need to so let's go ahead and let's just quickly save this and you can see we have three passing tests all right so now let us move on to testing by id so remember over here last priority is we can also test by specific id again we ultimately don't want to do this but if we have to we can so to do that what we can do is go to our header and give it a very specific data test id and we can call this data test id whatever we want this is going to be a string so let's just call this header 2 for instance or header1 whatever doesn't really matter and now what we can do here is let's go ahead and just copy this test and so we can get by test id and then we're going to say header one so now if we were to save this tada our tests pass all right cool so that is pretty much all we need to know with get by let's start exploring some of the other ones like find by so let's go ahead over here let's write a comment so this is going to be find by and now let's just see uh how find by works we're not going to explore all of the other different attributes because they work exactly the same way we're just going to look at find by so we want to find by text so let's actually copy um let's copy which one is it this one this this this one's perfect so let's go here and instead of get by let's just say find by so find by now this is going to fail and the reason why this is going to fail is this expects to be asynchronous so what we have to do here is say async and then a weight so we can say async await and now what we can do is we can go ahead and save this and then this works so again if we need anything to be asynchronous we are going to be using find by over get by now the last thing is let's start talking about query by so let's go ahead over here and then let's do query by so query by all right so let's copy this exact same one and let's say that this is not asynchronous so we don't have to async await it we can always specify the async function and not await this and that's what we'll do actually because that's what i did for the other ones and over here let's just do get by real quick so let's just do get by and then over here it says my header so of course this is going to pass everything is fine but let's say it changes to get by text and then over here i specify dogs well there's no there's no element inside of our webpage that has dog as text and so when we use get by that is going to fail so that is going to fail now if we don't want that to fail if we want to basically test that hey there is an element in inside of our uh or there isn't an element inside of our um inside of our application with the dog text and what we would do instead is we would do query by so we would do query by so we would do query by text and then what we can do is assert something else we can assert something like expect heading element and then to say something like dot not to be in document so this specifies the opposite condition and we're going to talk about assertions in great great detail but this is basically saying hey i don't expect this to be in the document so if i were to save this then this is going to pass but again if i change this to get then it is going to fail because because it's going to fail in this line right here and not hit the assertion so here we would say query buy now the last thing is let's just explore one of the get all by and specifically let's just look at get all by so let's go over here i'm just going to quickly copy this and let's go ahead and let's do get all by role so get all by role and we want to get all of the elements with the role of heading of heading so here we should expect to get these two elements inside of an array so over here we can change this to heading elements and then over here what we can do is we can get the length of it and then what we can do is we can assert that the length of this array is going to be 2b 2 so let's actually change this to an s and now what we can do is just save this and this should work fine all right so that pretty much sums it up and that is all of the different methods that we can utilize i hope that makes sense and i'll see you guys in the next lecture

Channel: The Net Ninja

Views: 56,217

Keywords: react testing library, react testing, react testing tutorial, react testing crash course, tutorial, crash course, react testing library tutorial, how to test react, unit testing, test, testing, react tests, RTL

Id: l9qr3EuLE_8

Length: 15min 36sec (936 seconds)

Published: Fri Jul 09 2021