How To Test React Components - Learn To Use React Testing Library

in this video we'll find out how to write test for your react components using just and react testing library my name is Maxime I make programming tutorials to make it easier for you to learn JavaScript and react so if you're interested subscribe to the channel and press like to this video and let's go let's say we have simple search component it only contains some input where we can input text text and we can click search button when we click search button it outputs our query and this is how it looks like inside of our app we define this component and we pass request search function in our case is just console.log the search box component looks like this it's a simple functional component that has the two functions defined update query and search click update query is triggered every time we change in value of our input and search click is triggered when we click our search button so what functionality does this component have in other words what do we need to test I would say we have three kinds of things going on here first of all we have our layout so we need to check that we correctly output our input and our search pattern next we have our update query function that is triggered every time we change data inside of our input it tracks the input value and updates it inside of our input component and last thing it does when we click our search button it actually sends our search request it sends our query outside through the function passed through through the props and it only does it when we have query so we need to check this as well let's write our tests will be using react testing libraries so add it to your package JSON go to search box test the GS create new file and first we need to import react import react from react then we need to import render and fire event functions from lab testing library roam react testing react we also need to import our search box component search box from local file search box and we form a document now we can start writing tests first test I wanna write is to verify that we correctly render our component it not italic it renders correctly and we pass a function we're going to use react testing library render function when called this function can return a bunch of different queries so in our case we are going to query by test ID and by placeholder name we're going to query our bottom by test ID and our search box by placeholder name because it has search placeholder query by test ID query by placeholder name equals render and we pass our search box component now we can make our expectations we write expect query by test ID search button to be true thing let's see if our tests have passed it renders correctly because in our search box file I've specified that data test ID for the search button so it can successfully find it next we need to make sure that our input is also rendered so let's copy this thing but instead of query by test ID let's use query by placeholder name query by placeholder text not name and let's fix import query back placeholder text search let's go to our test results and it still passes the test now let's test that our input value it changes because we have altered this behavior using our code in our component so let's use describe block to describe specific aspect of our component our input value and we need to test if it updates on change in this test we're gonna fire change event in our input component in our input element and verify that our that it's value have changed define query by placeholder text and render our search box we don't need our query button so we're not using query by test ad now we need to find our search search box and save it to a constant search input it will be acquired by placeholder text search now we'll fire the event the event will be change there is a bunch of odd events that we can fire but we need only this one we pass our search input as first element and our event will have target with value test now we need to expect something we will expect that search input search input value to be test so we make sure that the value that we fired inside inside of our event is same as resulting value of the input let's see the test results and they still pass ideally we want to make sure that they can also break so let's pass another value value and it and they broke that's good news let's fix them back and continue last thing you want to test this our search button so let's create our last describe block search button we could actually have a top layer describe block but we don't really need it because our test results already look quite tidy because we have only search box related tests in our search box test J's file so let's specify a function and it will have another describe block because we can have two situations here if we open search box and look at search click function there are two cases which we have query value if we have some value in our input element then we will trigger the request search function otherwise we'll do nothing so we need to check both cases let's go back to our tests and create another describe with no query or with empty query let's define another function and let's describe each block inside it does not trigger request search function request search function is a prop that we can pass to our search box let's use this line I will copy it over because we will need both query by test ID and query by placeholder text and we need to pass all first we need to create our request search function Const request search equals jest dot Afghan we're going to use mod function because we will need to track if it was called now we'd pass it as request search probe quest search okay and now we can make some action actually we don't need to query by place will retest because by default it will be empty we need to find our bottom now actually we will part the event fire event click beep a square e by test ID search button as first argument and then we make an expectation expect request search search not to have beam cold and it wasn't cold let's try removing now let's try removing not let's verify the test will fail and now let's move it back here we have just verified that if we have this function defined our request search function but we don't have any query and we click our search button this function is not going to be cold next we need to verify that if the query will be filled with some data then we will trigger this request search function let's create another described block described with data inside query inside of it we say it triggers request search function we do we can copy over this code we will just edit it a little bit to make sure it fits our purpose to do it will also need or query by placeholder text to find our search input Const search input equals query by placeholder text search now we need to fire our change event and we already have it a couple of lines above we can copy it over paste and now our query will have test value now we can check that our request search function which is just mock will be called once and our test passes let's make sure that we don't change the query and run it again and it fails now we have tested all the functionality of our component if you liked this video and you want to see more tutorials like this then subscribe to my channel press like button if you like this video and see you next time

Channel: Maksim Ivanov

Views: 36,425

Rating: 4.8823528 out of 5

Keywords: react testing library, reactjs, react testing library tutorial, react, testing, javascript tutorial, testing javascript, testing javascript with jest, testing reactjs components, testing react

Id: NE_aorvSeSQ

Length: 13min 42sec (822 seconds)

Published: Mon Nov 11 2019