React JS Testing Lists (TDD) | React Testing Library

[Music] hey how's it going uh today i want to talk about how to write tests for list components in react.js we're going to take that same test driven approach of of implementing this so i have as you can see here a list component that that i'm passing items into and there's nothing on the screen because we haven't actually implemented that right now we kind of just have this shell of a component that takes in items and then we're going to write the implementation in a little bit here and then we also have this list that test file where we're going to write our tests so let's get started with that since we're taking a test driven approach here so one of the things i would highly recommend thinking about with any list component is always think about your empty state you know the very first thing you should think about is empty state what does your list component do if if there's no data provided so one thing that you can do is perhaps render some kind of empty message renders an empty message if empty so how do we do that remember that first you gotta render your list your component and then we're gonna assert that whatever your message is is on the screen so perhaps we do get by text maybe we just say that you know empty list or something like that so i'm gonna say i expect this to be in the document and then obviously our test on the bottom here is gonna fail because we haven't implemented that so let's very quickly cover that use case real quick so an easy way to do this is we just add a basic if statement here of if items.length equals zero then return empty list you know whatever message you want in there and then we might want to initialize this to be an empty array so that we know there is a length property and then to further simplify this um we know that in javascript 0 is falsy so you can just do this as a shorthand right and now we see our test is passing and if we were to render an empty list actually just to prove this out visually you should see on the right here that we'll get our empty list message all right i'm just going to delete that and then now let's actually talk about testing you know the functionality of the list itself what does the list do right it lists out items so maybe we have a test that says it should render a list of items um so we can start with the same thing here where we have a render of a list but this time we're going to pass in an items array that is going to look like this i'm actually just going to take the example one that i already have here right so there's an id and a name and then from there we pass it in as a prop so right now this is passing because we have no assertions right with tdd we kind of want to get our test to fail and then we'll we'll implement it to get it to pass again so what are some assertions that we can add in here a very simple one might be to just do something like you know expect this name to show up on the screen so we might be able to do something like this to be in the document and you should see that this will fail because it's looking for z in this in the rendered screen but it's not there so this would be a simple way to find one of those items on the screen [Music] but it's not complete right ideally that you have your tests asserting that every item shows up on the screen if that's what your implementation does so you know you can of course copy this line two more times and assert that y and x is on the screen um or you can throw a for loop in here that goes through items and then for each item do this assertion but there's a couple disadvantages with those approaches one of them is what if your requirements includes sorting so for example if this was it should render a list of sorted items so what we likely want to assert in this case is that the items specifically render in the order of x then y then z and you can't really pull that assertion off with just these you know one by one um query and check that they're in the document that doesn't verify the order that they're in so how can we improve this so effectively you need to be able to have a way of querying all the items at once in the order that they show up on the screen what i would recommend doing is utilizing roles so let me type this up and then i'll talk about it a little bit more get all by roll list item so what is this in uh html or i guess in in browsers in general there's a concept of roles um and this usually applies to you know you might have heard it as arya rolls this is usually for accessibility so for example maybe there's a user that has limited vision and maybe they're using a screen reader that screen reader uses these rules to kind of determine what is the element on the screen like is it an item of a list is it a list is it a paragraph is it a header etc so it's good to know about these roles and um if you're testing your code this way it also makes sure that your implementation ends up being accessible because that's how you're trying to test it so i recommend reading a little bit about this but the thing to recognize is that some semantic html elements automatically have these roles so for example the the ally element the list item element if you look into the documentation you'll see that there is an implicit area role of list item for this so what that effectively means is if we write our implementation to use lis as our list item it will be caught in this in this query so before we should move forward i should actually rename this to something else maybe rendered items so that it doesn't conflict with my items are right here um now that we're kind of querying all of the list items kind of as a whole the thought there is we should be able to get all of the html elements that render all three of these so being able to query an entire list like that provides us with a couple benefits one is we can assert the length for example we can do rendered items dot length to equal items that length right we're asserting that um the number of items that we passed in and the number of items that gets rendered are the same so that's a good assertion you know unless you're doing pagination or something like that and finally we should now also be able to write an assertion that the items prints in a specific order because we're getting them all at once so we can do something like expect um rendered items and remember that this is going to be rendered items is a list of html elements that we were able to query but we know that each of these items have a text content so if we were just trying to grab you know the the string between uh that html we should expect that the value of that equals an array of we expect it to be x then y then z because we want it sorted okay so now again our test is failing let's go into our implementation and make this work so remember that we said we're gonna implement this using um you know proper semantics so that we get the the role for free so we're gonna do items dot map i'm gonna map each item into an li element then within each of these is going to be their name and then also remember that in react you always got to provide keys so that's where the id comes in all right you'll notice that our test is failing right because we didn't put any sorting in and it's rendering zyx in the same order that it comes in so how do we sort going to add sort over here and then i actually order already wrote a simple utility here for sorting by the property name so we're going to import that here and we'll take that function and provide it in here and now you'll see our our test is passing and on the screen as well you can visually see that it's now being rendered in the proper sorted order xyz so that's really pretty much it in terms of the basics of testing a list in react again remember to test for the empty state and then you know think about things like accessibility and ordering you know most list components usually have some kind of ordering this also applies to like um table views um you know like tables usually have like column sorting or something like that um but if you would like to learn more you know there are a couple other things to um change here depending on your preference so for example instead of manually writing the array like this i personally really like using uh inline snapshots to match inline snapshot and you'll notice when that runs what it's going to do is it's going to take a snapshot of what came out and then if something makes this break so for example maybe i had a coworker accidentally delete the sorting code you know the next time that test runs it's then gonna show that hey your snapshot changed it is now rendering in a non-sorted order do you want to update the snapshot or not and obviously in this case you would say no you don't want to update the snapshot you introduce the bug make sure you fix that um so that's one nice way for you to not have to manually type out the result like this and then obviously you know as much as possible like i said try to write your code in an accessible way um but you you might not always be using you know these types of html elements like the uls and ols and li maybe you just have divs right how do you go about testing that well you can still kind of make this a little bit accessible by manually providing the role as you can see here you know you can provide a role of list item over here and a roll of list like this and notice that our test is still passing because it's still kind of querying by that role so you can use custom elements as long as you're still providing those roles you know keeping accessibility in mind and then let's just say maybe you didn't know about these roles you didn't know about accessibility um what's another way to to solve this well in react testing library you also have the option of using data test ids so for example if we made this be data dash test id you know maybe you have a id like that then in your task you can instead do get all by test id and you can do like that item and again we got passing so there's several different ways that you can do this um i definitely again would recommend if you can write your code in a way that it's automatically kind of accessible and semantic at the same time absolutely do it that way but these are the different ways that you can write lists and test the list and then finally a couple of quick things that i should mention if if you know your stuff well you're probably wondering shouldn't this be inner text and this is actually going to to fail because [Music] js dom which is like the fake browser that just uses when you're writing your test doesn't support inner text there's uh there's an open ticket for that over here that's been open since 2015 so i don't see it being fixed anytime soon but basically js dom doesn't support inner text um and inner text is supposed to represent the visual text that you're trying to query which would make a lot more sense because that's what the user sees but in this case that's why we used text content as an alternative and then one last thing if you did use inline snapshots like this if you get an error saying could not find prettier that's another thing worth mentioning is you need to install prettier to get that to work um again there's an open ticket for it kind of weird that it's not already a built-in dependency of just um but that's just another thing to watch out for in this case i did install that ahead of time you'll see it's in my dependencies so if you get an error saying could not find prettier just make sure to install it and which it's prettier is actually something i would recommend installing in in every javascript project anyways all right that's about it for this video hopefully this was something that provided you some value make sure to hit that like button so that others can find this video as well and maybe even subscribe if you want to see more i'll definitely be covering more react topics testing topics node.js maybe even some data structures and algorithms so if you're interested in that make sure to subscribe

Channel: Marius Espejo

Views: 804

Rating: 5 out of 5

Keywords: react, tdd, test driven development, reactjs tutorial, react js, react testing library, react testing, react list, testing library react, testing library react tutorial, react.js, web dev, react-testing-library, react beginner, enzyme, react testing jest, jest, react testing library tutorial

Id: M9S54fcBF3g

Length: 16min 54sec (1014 seconds)

Published: Sat Jan 30 2021