React Testing Library Tutorial #9 - Describe Block

Key Takeaways

in this video we are going to cover a better way of structuring our tests now if we go back to this diagram here i illustrated that typically we have a test block and then within this test block we're going to have the content needed to execute our test and that is what we have been doing thus far here we have our test block and then we have the content to execute our test within the callback but now we have so many tests and we should have a way of grouping and organizing these tests and we can actually do that through describe blocks we can use describe blocks to group common tests for instance all these tests test the to do footer so we can have a describe block that groups all of these tests inside of that describe block then we can describe that these tests test the to-do footer so at the end of the day it might look something like this we are going to have a describe block and then we can group common tests within that describe block now also we could do something like this so we can have a describe block and we can have common tests within it but then we can also have a child describe block to even more separate tests out within the parent describe blocks over here we have these common tests and then these common tests but they're separated through this described block now we're not going to be doing this inside of this crash course but at the end of the day when you have more complicated tests in your application you can think of this as a way of separating things out but in this lecture we are just going to be using this approach so let's go ahead and let's use utilize the describe blocks now before i do that let's just comment out all of the unnecessary tests so over here we have the first test and then over here we have the second test i think these are the only two valid tests i mean all the tests are valid but the other ones were just a way of learning about assertions so i'll just comment these tests out this first test test if if things work as expected and then the second test tests if the text is plural or the text is singular if you pass one so let's just go ahead and let's save that and we should see three passing tests now what we can do is have a describe block and the describe block is going to be very similar we're going to have the first parameter is going to be a string that describes this block i'm just going to say to do footer because this is just testing the to-do footer and then in here we're going to have a callback and now what we're going to do is we're going to copy all this if i can copy it all right let me just zoom out a little bit here i'm going to copy this i'm really having a hard time here there we go i'm going to cut it out and just paste it inside of the describe block and if i save this you can see that everything passes all right cool and this is a typical convention and this is how most tests are going to be organized now notes you can always put another describe a block in here maybe saying that this is testing functionality one of this components and you can have maybe this test in here and then over here we can have another describe block and this is saying hello testing functionality 2 functionality 2 and then over here we can have another describe block so we can just cut this out paste it in here and this is completely valid again this is just a better way of reorganizing our organizing our components and our tests so let's just go ahead and let's just get rid of this describe block we don't need to actually let me just control z out of it because i don't want to have these children describe blocks let's just do there we go that should be fine and now let's just do the same thing for our other uh test file our header test file and we really have just one test here but let's just put it in a describe block anyways so we'll say here header and we'll just have a call back we'll cut this out paste it in done all right very short lecture on the best practices of organizing your tests