How I like to Write Integration Tests in React

so I'm gonna be showing you how I like to write tests for components and react that use Apollo so to demo this we're going to be testing out this simple component right here and it is a to do basically list that you can add items to and it is form and if I add it to do and there's no two dues or there's no text in the Box it's gonna have a required and then I can add some text and I can add it to do and then I'll show up so this functionality is what I want to test and so the way I test may be a little orthogonal but what I like to do is basically emulate what I would do if I was not actually writing a test and what I mean by that is what I would do if I was just in the browser and wanted to like you know do what I just did there to verify it worked is I like to replicate that and I like to do kind of either use a end end test with Cypress or use an integration test with react testing library and we're gonna be looking at react testing library in this video I like this one over enzyme the reason why I like this library a lot is it promotes tests where you don't worry about the underlying implementation instead you kind of just interact with it like you were a user so I really like that approach and so we're going to be taking a look how we can write a test for that so we are going to be going through the getting started of react testing library so we're gonna start by yarn adding this library right here and I already add this to my little create react app here so I'm not gonna run that but I have a app test at TSX which is a blank file that I'm going to add my tests to now on one thing I wanted to mention real quick too is if you want to fall along with this I'll put the code on github so you can basically write this test along with me so we've added this library I'm gonna go to the example that they have and we're going to copy the example and I'll link this below if you want to copy this as well and this is just getting started code for us alright so this is what it should look like I'm not gonna worry about installing just Dom for this or these two libraries and you'll notice I wrote the word app test out TSX if you're new to testing this is something you'll usually do in your files you'll usually call them dot test or dot speck is another one you'll see and so this makes it easy for just to find your file so just as a test runner it's gonna run your tests for you so either dot speck or dot test is usually what I name them there may be some other file names you can do I think some people say underscore underscore test but I usually do app dot test TSX and I give it the same name as I might component up testing so in this case I'm testing my app to renders the two guys okay so here I have a test so I'm going to make sure I can't submit a to do its basically what I'm testing we could describe this so this is more of a just thing but usually you can have a top level thing for example you might call this the app or we could give this more specific name to do app and then side of that you can give more specific test cases so each one of these is a test case so in this case I could name this one verify validation works we could do another test or say submit works and we could put our logic for the test in each one for this I'm just going to do a single test case here note you can also do it for shorthand so if you ever see that in people's code it's the same as test all right so we're going to just look at a single test case here and I'm going to get rid of this stuff right here and we're just going to start with this render all right so I have react testing library imports from that notice there's this after each is gonna clean up this is something from react testing library you can get rid of this by adding something to your just config so I recommend looking at the docs for this and you'll get a better idea of how you can simplify that a little bit so I'm not gonna worry about that for now though so here I'm gonna say render and this is coming from react testing library and I'm going to render an Apollo provider Apollo Mach provider if you don't know what this is I recommend watching the previous video to this I'll link it below where I explain what that is this is basically going to mock out our Apollo requests and just to show you what we are mocking out if we go let's start with it to do form so we have a mutation that we're going to be mocking out where we add it to do and you can see this is a form ik form but the cool thing about react testing library is it really doesn't matter what form library you use the test is gonna look the same so I can change the implementation of this totally and my test doesn't have to which is really nice alright so I'm going to render my app here and basically you render what you want to tests in this case I want to test my app so I'm gonna doing that so the first thing that I really like to do is just run debug so this is gonna just print the code that's being rendered rendered the log so now I'm just gonna run yarn tests I'm using clay react app so this can run just underneath the hood and run my test so what this does is it just prints the HTML that's gonna be rendered by the components here and just gives me an idea of where I'm starting with right so this is what I'm starting with I can see my input field here you can see the button I can submit and so loading some data for the form or for the to do's I mean so the first thing that I want to test is my validation works so how it works in the testing library is we want to select elements and there's several ways you can select elements an element I want to select is this input field here you'll notice the input field will actually you know what we're not even worry about adding anything to the input field now I think we'll start with the button that was what we want to add to but notice like we have a placeholder on our input and we could select this by saying get get placeholder get by placeholder text here and so I could say Const to do input is equal to get by placeholder text and then we could plug in our text here which is to do dot dot dot and so there's all kinds of different things that you can get by so you can see I have all these different gets get all and get by you can get it by a test ID text title and so on so check those out if you want to select elements by different things so that's going to give us a reference to the input I can also get a reference to the button here and a lot of times what I like to do to get a reference is to add a test idea and that's what I'm gonna do in this case you can add tests ID to a component by saying this so data - test ID and then what you want to call it so I'm gonna say submit - button and then in my actual app here and close that we can actually say get by test ID so I'm gonna say submit button is equal to get by test ID all right and here I'm going to say submit button and now I can say fire event dot click and fire event is coming from react testing library up here and then we can pass the element submit button and fire event is how you basically can interact with the different elements you have here so it has all kinds of stuff copy cut drag we can see all the different events that we can trigger so we're gonna do a click in this case and we can click our submit button and again we can debug to see what it looks like and the point of this is I want to be able to see my validation so let's add I can just just debug there so let's run this and see so come over to our thing you can see button add to do and notice that we don't actually see the text or any text here if we go to our to-do form should show an error if there's if there is available if there is an error it should show it so it's not seeing an air yet and a lot of times this happens because well we just haven't waited for it to load or to render so a lot of times I like to use Dom change so we can run this function called wait for Dom change and this again is coming from react testing library and this is just gonna wait for the Dom to change so after I click the submit button I want to wait until the element is rendered basically it should rerender it should validate to see that there's something wrong and it should display an error so now that we add this and this was gonna return a promise so you can just await it made this thing async if we come down here now we can now see our required text showing up there and so what we can do is we can just we don't even have to wait we can just say get by get by oh you know what I haven't got from here yet I'll be easiest say get by text and we can I can grab this required div and see that it's there and I think this throws in air if I can't find it so for example let's just see what happens here it says unable to find an element with a text - required - so perfect so if I just add it like this this is going to assert that it's able to find the required text nice so so far what we've done is we've hit the submit button waited for a change to happen and verify that the required text shows up so the next thing that I'd like to do is I would like to fill out my form so we have access to this to do input I'm going to say fire event dot change on our to do input and we say target value and then you'll notice this looks similar to what an event looks like and we'll pass in the actual text here that we want to update so in this case I say go to the store dad to my to do so basically this is gonna fill out the input and now if I want you can fire another to do button to get triggered and this is going to submit my form so now what do I want to do to actually make sure my form is submitted okay well what I did in the last one was verify that the to do showed up so let's do exactly that so in this case what I can do is I can say yeah I get by text as I guess the one I want to say get by text and I want to get this go to the store text in this case there's going to be a couple Dom changes so I'm going to use a different thing here I'm gonna say wait for element and this takes a function like this and basically this says wait for the an element to show up with the text go to the store in this case I don't actually don't know if this will actually work let's see if it does see how it's it was loading for a little bit and it aired out it says unable to find an element with the text go to the store and that's because I haven't mocked out my mutation yet but this gives you just an idea what weight to the element does so it's going to basically wait wait wait wait until this becomes true or it's going to air out all right so when I click on the submit button it's gonna call mutation so what I want to do is I want to mock that out so I'm going to say custom resolvers mutation and then the name of it had to do and it's gonna return an ID of one and the type is going to be go to the store so that is going to be what's returned from my mutation and if we look at what I'm doing in the mutation is after that gets run it updates and it updates the get to do is query and so that's what should be causing the get text to show up and so we can see that our test has now passed we do have this problem with to two children with the same keys showing up so we could go over to our to Do's and we can see the ID we're using and the ID looks like it is not working so I could just use the index as a key and ignore the ID there maybe that'll get the test to pass so there we go so we have tested this component and this is probably how I write the test so this may be a little weird I'm kind of combining two components together but this is how I tend to write tests it's it's a way where I don't have to write a ton of tests and I can test a lot of different things so there's places to use tests like this and there's places where you may want to write smaller tests but this is the gist of it and this is the gist of react testing library there's a lot more to it but this is kind of how I like to use it with Apollo so I use debug a lot make sure I can see what the output is and I basically select the elements I want to interact with fire some events on them and then I use some of these components these special react testing things like wait for Dom to change and again you can find these things in the docs or wait for an element and then I make sure elements I expect to show up do or whatnot and that's the gist of how I will write my tests in Apollo and for my react components you

Channel: Ben Awad

Views: 42,790

Rating: 4.8932805 out of 5

Keywords: React, React Testing Library, Apollo, Integration Tests, How I like to Write Integration Tests, Write Integration Tests, Tests in React

Id: is83bEK3n5A

Length: 15min 17sec (917 seconds)

Published: Sat Jun 15 2019