Unit testing in React | How to unit test in react using jest | Testing React apps @aseemwangoo#react

hey guys in this video we'll see  how to do unit testing in react   run our react app so this is a react app  where we have a fading text a normal text   and a link and if i click on this link it  launches a url so let's see how do we test this before we start writing this we need to  make sure we have the dell dependencies   installed so the two dependencies  needed are testing library react   and react test renderer after installing you  can see the dependencies inside your packages on   dev dependencies section also guys do note that  the version of reactus renderer should be the same   as what you have of your react  so in our case it's 17.0.2 so let's see how does our folder  structure look like on the left hand   side we can expand the components folder so  it has different components comprised under   folders for example we have a text component in  the text folder link component in the link folder   fader component in the fader folder let's take  a component let's say text and see what's inside   this so it basically comprises of a normal  div with h3 and a parameter which is passed   for this component is a text and  this text should be of type string for writing test for this component we will be  making use of chest and let's see what's chest   so basically it's a javascript testing framework  which works with projects like babel typescript   react and other popular ui frameworks in the  website itself it claims to be fast and safe   provides code coverage easy mocking and  also it's used by companies like airbnb   instagram facebook twitter etc all our tests will  be placed under this folder dash test dash dash   and inside this we will categorize them based  on the components so for example the text folder   will have the test for the text component link  folder will have the test for link component   and the fader will have the test for fader  component one thing to note is all the   tests should be preceded by dot test.js so for  example we have link as link.test.js fader as   fader.test.js this helps just to recognize that  hey these files are for the test let's see our   text test so we click on this file and we also  open the text component itself first thing we do   is import the testing library package next thing  we import the chest for writing tests we make use   of this test which comes from jest and this takes  basically a name function and a timer so the name   of our test is should render text component the  function comprises of the description of this test   in this test we first render the text component  using render we use the screen dot get by test id   and pass in the id as text this text id is nothing  but the test id which we see in our text component   and this can be according to you screen is  nothing but you can consider it as a dom which   comprises of the element which you just rendered  in our case it holds the text component finally   we use the expect to see whether our element is  present in the document this expect function is   basically used every time we want to test a  value and this 2b document it sees whether   an element is present in the document let's  run this test now using the command npm test   and it runs our text or test.js it says us hey  you have one test suit which is correct since we   are in the text test and it only has one test  which is passed let's look at another component   which is fader so this comprises of a hook which  is use state and use effect it comprises of props   like text and by default the text is said to  have a world so let's see how we can test this   so on the left hand side we have our fader test  which does is firstly render the fader component   we again use the screen dot get by test id to  get that component and the id pass this fader   this id is the same inside our fader component  which is also fader now we expect this element   to be in the document next thing it should have  the text content as test since we are passing the   text as test once we render finally we expect  this element to have the css class as fade in   and if we see in the component the first  css class is fade in let's run the test now   and we see here the test suite is feature which  is correct it has one test in it and it passes   for running all the tests in your  project you simply need to press   a and it comprises of three test suits now  total four tests which everything is passed we can also do snapshot testing using chest and  snapshot testing is basically where a test case   renders a ui component takes a snapshot and  then compares it to the reference snapshot   going back to our text components test we open  this file and we now have a snapshot test case   let's see first we import the library react test  renderer and render from that specifically next   we render our text component using renderer.create  next we call the 2json method on the result of the   renderer create finally we expect the result  to match the snapshot this too much snapshot   basically ensures the value matches the most  recent snapshot once we run this test now we see   that hey this creates a folder called as snapshots  inside which it creates a snapshot of the text   component on clicking of the snapshot we see that  this is a normal file which comprises of that text   component snapshot when this test was written now  let's say someone from our team alters this test   and enters a different value so for example let's  say we take any value let's say yo and we close   in the text so if we see carefully that snapshot  comprises of the havel and now we have changed the   text to bu now if we run this test this should  fail since our snapshot won't match and yes it   does if we see the difference it says that hey  the text is not matching so it is having yo   instead the snapshot was having halt so in this  case if you want you can update the snapshot   using you or you can correct your text so let's  see we if we update the snapshot so it runs the   test again and now it has updated the snapshot  if we can see here it has yo and also this test   passes that's it from this video guys if you  like this video share subscribe and comment

Channel: aseem wangoo

Views: 9,624

Keywords:

Id: hyIacC653_A

Length: 7min 54sec (474 seconds)

Published: Fri Apr 22 2022