Practical Beginner Guide to Testing - Next.js | React | Jest | React Testing Library (RTL)

if this is the first time you write test for web applications then this video is for you because today we are going to test Rea components props input Fields form submission all in one video it's easier and more fun than you think so let's get [Music] started first of all I'd like to say thank you very much for voting on the poll to decide on what content I create on my channel because I want my channel to be community- based and since you voted for nextjs and just I decided to create a combo of videos between the two how to test nextjs application with just and of course react testing Library so enough talking and let's start coding and testing before we get started I want to say that everything you see me writing on the screen is available on my GitHub repository so make sure to check out the description box in order to see the link to my GitHub repository to Fork this repo to your account and clone it to your system and start coding along with me so um in order to start testing a nextjs application I go to the nextjs uh documentations and installation I install nextjs application with create next app after that I go to the testing section with just and follow all the steps in order to configure just to work with next um I follow all the steps until this at test script to package.json so after you add uh these two scripts your package.json you can start following along with me uh that's all I have done here and also I created some components so if I run npm run Dev to start a development server you can see that I have a very simple application of a form with two input fields and a button add user so whenever I write something here like Jane and Jane at jane.com and and click add user which is submitting the form uh all the input values will be printed on the screen name Jane email Jane jane.com and if I decided to write something else and click add user you see that it is printed again on the screen so I want to test this very simple application by checking that these input Fields exist on the screen and also I want to check that whenever the user clicks on this button the form is submitted with the correct data so let's see how to achieve that in just and react testing Library if I go to my um application I want to create a folder called underscore tests underscore uncore it has to be in this specific format and inside this folder I want to create a file called user form. test.js by the way that folder has to be in the root directory of of your application and inside this user format test file I want to import some functions and I want to import the user form uh component in order to start testing it so um what kind of functions are we uh importing we are importing a function called render render is just to test that just to render the component on on the screen okay on the document fake document and the screen is to interact with the components and interact with the document which is the HTML document and user the the user um method is to simulate some user actions like user click clicking on a button writing on a keyboard something like that so uh let's start writing test I want to start by writing test which is globally available by just um pass it a string which is it renders to input fields on the screen and then pass it a call back okay and inside this callback I can write the logic for my test so I want to first of all to render the user form component usually our tests follow these uh steps which is first of all uh render the component and then manipulate the uh document which is the HTML document document and then do assertions we're going to talk about assertions later but for now let's see how we can uh manipulate the HTML document I want to after rendering the component I want to select all the input fields that inside that are inside this components so I want to con input Fields equals to uh in order to select I want to use the screen screen dot um here are a lot of uh query methods I want to get all by roll okay this is this is a query method that can query our document based on role but what is the role uh let's write text box okay what is this role the role refers to the ARA RO system which is a system in web development that helps people with disabilities to understand our application and our websites the AR roll system has its own standards and it's not easy to understand so uh I'm not going to go in detail about that but for our purposes in order to select uh any HTML element I want to use the RO and if you if you click click control space here you can see that I have a lot of roles already defined and if you are not sure about what kind of role you want to select you can simply go to chat gbt and ask uh what what is the ARA Ro associated with an input and you get an answer which is text box okay text box and since we selected all the rols that have the text box as an area role uh I expect to get back in a array so this is an array of HTML elements so I want to say uh in my assertion I want to say I expect okay I want to expect that input Fields here we Define some matcher something called a matcher uh the matchers are I don't memorize the mattress from uh my head so I can go to documentation of testing in just and you see here the measures so I want to test that um it has a length I want to go length you can see that this this meure to have length so to have length and I want to pass it a number which is number two because I have only two input Fields so and now let's test our test file so I want to go to this terminal and write npm run test watch which will run just in a watch mode so any changes we make will automatically run our test again and again you can see that I already have a error so I think I misspelled length to capital L and now should work you can see that the tests pass and we're good and happy this feeling of seeing your test pass is the best feeling in the world anyway uh let's test if we write three instead of two we can see that it will fail I think ah come on yeah it fails so uh our test is working fine now let's test U another thing which is not only uh we have only two inputs on the screen we want to test um what happens if what happens if I wrote something inside these inputs and click on the uh submission uh button which is add user so I want to write another test which is it no not it sorry test um it calls the onad user function with proper arguments arguments when or upon form submission and we'll pass a call back function as a second argument and start uh writing the test logic here but I want to check that this function has the proper name I want to go to the form component no not form component I think in page. TSX yeah you can see that user form has this on on user ad so I want to check that this on user ad is is um is invoked or it's called Uh when the form is submitted so I want to copy paste yeah on user ad not add user anyway let's start by first rendering okay I want to render render the user form component so render user form after rendering the component I want to start manipulating manipulate the document so how can I mimic the fact that the user submits a form so first of all I want to select the input okay select the input so there are multiple ways to select an input um if we remember that we already did something similar which is selecting all the input fields on on the document and then we can simply say that con name name field equals to input Fields the first index okay so that is the the name in input field and then we can um click on that by using the await because we want to await for the user to click on the name field okay since we defined the weight we need to write here async okay but this way of selecting the input field is is not uh optimal why is that because at some point in time I might decide that my form changes its layout maybe the input field of of the name comes second and the email comes first maybe I add um password here maybe I change the entire uh structure of the component so it doesn't make sense to lock the uh the name input field as the first uh index so I don't want to follow this uh approach in selecting the name input field I want to select it based on something else which is screen. get Roll by or get by roll and of course it's a text box and here the difference is I want to pass a uh options you can see that options to filter what kind of uh elements I want to choose from the document so I want to filter by name and write a Rex which is name I okay what is this name I it means that I want to select uh any input field okay I want to select the input field that has the name associated with that input so uh how it works it works like this we have a label and we have an input okay so I want to select the input that has a label called name but how does we the HTML knows that this label belongs to this input and not to this input okay here the email the the way that uh the document differentiates between the two is by defining this HTML 4 so by defining HTML 4 equals name and inside the the input I Define ID with name so I create a bond between the input and the label so in the in the test when I select the uh area Ro text box with name called name I actually select this uh input because it is associated with this label okay and uh the fact that I chose name here with I it means that I can select any input that has the label name okay that has the label name maybe name maybe namey because uh it doesn't matter at least it has name and also I don't care about capitalization or something like that uh and and that's it and we can test that if we if we decide to write something like name me and something that very weird the test still runs and still passes because at least I can see that there is name but if I decided to add something in here like na me okay we should expect um we should we should expect the the test to fail as you can see it fails because there is no element on the screen with enough me okay it has to be name okay anyway we selected the input field so I don't need this after selecting the input field I want to click on that after click on the input field I want to await user. keyboard because I want to to mimic the fact that the user is uh writing something inside the input so I want to write Jane and I want to repeat the same process for the email field okay here it's email instead of name it's email and click on the email field and write some email like jane. test.com and what else so after clicking on the input fields and writing something in that I want to submit um submit the form in order to submit the form or mimic the fact that the user is submitting the form I want to select the button so I want to cost button equals to user no not user sorry screen do get by roll the area Ro of a button is simply button and I want to simulate the user clicking on the button which is await user dot click click on what click on the button okay after clicking on the button I want to do an insertion assertion which is that the function is being called what kind of function I expect to be called the function is this unuser ad okay un user ad um is a prop okay that I expect to call a function like submit Handler submit Handler and I want to Define this function so cost submit header is simply a function okay so I want to check that this function is being called uh whenever the user clicks on the button so I want here to expect this function dot to have no I don't know the name of the matcher so I want to go to the uh just documentations you can see that um two have been called so I can copy paste this and let's test okay one one test passes which is the first one and the second test fails let's see the error message that I got the error message says mature error received value must be a mock or a spy so I don't want to go in details about the difference between a mock and a spy but for our case I want to define a mock so what is a mock a mock is simply a fake representation of a function that's even in English in U in the English language a mark is something fake or a fake representation of something so um when we mock a function we actually make a fake representation of that function why a representation of the function not the real implementation of it because in testing I cannot uh I cannot call the uh real implementation of the function and and um do some testing on it for example I want to test how many times this function is being called how many uh arguments uh being passed to that uh function what kind of arguments being passed uh if it's being called or not so all these data that I want to collect from the function I can I cannot collect it from a real function I want to mock the function so I want to create a fake function uh in order to create a fake function I just simply write just FN and that's how we create a mock so I can call it a mock mock submitter okay you can see the test is already passing so everything is working fine okay now let's test that this function that is being called is being called with specific arguments so um let's go back to the documentations and I already have this uh function in here which is called to have been called with specific arguments so I want to call it on this okay I expect that the function is being called and and is being called with this arguments uh what kind of arguments the arguments are name and email but let's make sure inside the user form so on user I want to call this function with these arguments okay name and email so let's define name name is Jane because we wrote Jane in the in in the name input field and the email is what was that Jan test.com and now it's time for real testing you can see it passes and to prove my point if I decided to write something else oh yeah the test fails so I know for sure that my tests are working fine and all my functions are working as expected so that is my brief introduction into the world of testing you've learned how to test react components and react components with functions as props and user actions like clicking on a button uh clicking on input field writing something inside the input field and finally submitting the form and actually checking if the form is submitted with the right arguments and that's something very cool I hope you like this video and if you did please click on the like button below and subscribe to my channel to see more videos like this in the future and also expect to see more advanced content on testing with just and react testing library in the future in this series so until then see you very [Music] [Music] soon

Channel: Mark Maksi

Views: 3,433

Keywords: jest, testing, software testing, react testing, react testing library, mock vs spy, mock functions, testing tutorial, testing react component, nextjs testing, testing nextjs, React testing library crash course, React testing library with jest, React test jest, React testing

Id: pnLC-9waA44

Length: 21min 56sec (1316 seconds)

Published: Fri Jan 12 2024