NextJS & Tests : mocking useRouter (just basics) with react testing library (4/6)
NextJS & Tests : mocking useRouter (just basics) with react testing library (4/6)
In this episode , I create the navbar \u0026 product component while writing 3 tests and :
1. creating advanced nav links ,
2. displaying total number of cart items in navbar ,
3. mocking useRouter
Discussion Link : https://github.com/vercel/next.js/dis…
Timestamps:
0:00 Introduction
0:34 Creating the product component
6:47 Creating the navbar component
9:33 Advancing the nav links
13:50 mocking useRouter
15:53 github discussion on mocking useRouter
16:18 displaying total cart items in navbar
19:31 Concluding
NextJS \u0026 Tests Playlist : • NextJS \u0026 Tests (react testing library…
Javascript Projects PlayList: • Javascript Project - Attendance Meter
React PlayList: • React Navbar -CREATING A RESPONSIVE …
Django PlayList : • MAKING FRIENDS DJANGO: HOW TO HAVE A …
*PLEASE NOTE:
PLEASE TAKE DECISIONS BASED ON YOUR RESEARCH AND WHAT YOU FEEL RIGHT
I’M JUST SHARING MY OWN RESEARCH THROUGH THIS VIDEO !!
AND THIS VIDEO DOES NOT FORCE YOU ANYTHING BY ANY MEANS!! *
Content
0.4 -> hi there abhik here this is fourth episode of next
js and tests and throughout this episode i will
8.8 -> build the navbar and product component as well
as mock use router so in the index page so here
16.96 -> instead of showing this just the product.name for
here and here for the products i want to render a
22.8 -> product component which will show the name the
price and as well as a button of add to cart
29.52 -> so before doing that so to create do that
i will inside this components directory i
34.96 -> will create a folder with the name of product and
inside this product i will create two files one
40.24 -> will be product dot js to store our component
and the another one will be product.taste.jsx
49.2 -> this will have all our tests now inside the test
file i will first import react and i will also
58.16 -> create a dummy component for now to import it in
our product.test that's it so i will save this and
66.64 -> here i will import this dummy component right
now then what i will do is i will start writing
72.08 -> tests for our product component so
i will start with describe block
79.04 -> then our first test renders product correctly
what will it render so first of all we will render
86.32 -> our product component and then we will expect
that that it shows the name of the product now
92.32 -> inside this mock product remember i already
created a product mock product so this is the
97.68 -> mock product that i will be using throughout
this test so for that i will be importing
105.28 -> so when i have imported mock product i want i
will pass this to our product mock product that's
112.4 -> it and then i will expect that it will get the
name of monitor and this price will be shown here
119.92 -> this is formatted with simple so let's see that
monitor also one more thing that i want to show
126.56 -> is it should render a button with the name of
add to cart so i will screen dot get by roll
133.28 -> button whose name will be add to cart now we
know that have not our test product like that
143.12 -> so what i can do here is product and then
also i can do something like add to cart
151.92 -> so here inside this div i will have a h5 tag
and there i will render the product dot name
160 -> and then i will have a p tag
where i will show the price
166.72 -> dot formatted with symbol and then we'll have a
button with add to cartridge also one more thing
175.92 -> that is here after this you should have product
and this product and add to cart should be wrapped
182 -> inside this curly braces and this is what our test
looks like and make sure you put them properly
188.56 -> and let's see now and you can see
that our tails are passing now right
195.68 -> let's now render those instead of product.name
i will use product and then the product will be
204.16 -> product and add to cart will be so i can
do one thing that is i will copy this
215.52 -> and instead of there i will paste it here and then
i will close this and i will remove this one here
225.84 -> save this and it will look like
this so i will copy this same thing
231.76 -> and i will do it this here also and i will do this
here also then save this now artists won't fail
241.28 -> yes now this is not filling
let's see it in the browser
245.12 -> so now you can see that every keyboard add to
cart rgb and record gaming house regular mouse
251.44 -> monitor keyboard everything is
shown in the network card and
254.64 -> if i search the search results are also showing
this add to cart last thing that is remaining is
261.68 -> we should call this attribute right so here we can
do something like on click and then add to cart
268.8 -> let's see so let me open my cart here and here
we are seeing that please buy something from our
275.68 -> store so i will add to cart this one and i will
also have to get resin let's refresh this page
285.36 -> and you can see this keyboard and
regular mouse is added to cart now
290.4 -> so our functionality is working perfectly let's
also write a test for it so what can we write
297.44 -> so render product correctly
we can we can give this a name
303.52 -> and then we will import user event
make sure it is getting reported
308.08 -> and then dot click add to cut button and then
we will expect that our add to cut function is
314 -> getting called so for that we need to pass here
just function so add to cart constant add to cart
322.08 -> which will be adjust dot append function
this is a mock function we are passing
329.36 -> and then we will expect that add to cart call
334.4 -> what is should pass
339.28 -> you might ask why don't we do a test like this to
be called with but what this test will fail as you
346.4 -> can see here expected is the item that is expected
but it is received on click and this function and
354.56 -> all size so what is happening here is understand
this that we are calling this add to cart
361.36 -> functional this actual function inside this add
to that function this arrow function and inside
368.64 -> that error function we are calling our prop that
we have passed from fjs that prop is getting that
375.2 -> add to cart function original activate function is
inside a function and this function is our problem
383.92 -> so we are not calling our uh inside this
product or component we are not calling our
390.32 -> add to cut prop with our product dot id okay
so that is why this test will be failing okay
398.16 -> so we will remove this test
402.32 -> and our test should pass right now and you
can see that all our tests are passing right
410.32 -> now to create the component uh network
component i will go to the components directory
415.28 -> and then i will create another folder with
the name of name and similar process like
421.04 -> product we will create two files
name.js network dot test dot jsx
429.6 -> right inside the number whatever
we shall create our empty component
436.32 -> inside the number twist here i will create the
first test i will import react then import the
442.88 -> component then create the describe block
name it nav bar component then create the
448.4 -> first test which will be it renders the diabetics
correctly so the first step render the number then
458.08 -> we will hear gate by rule role of link and
first one will be hope second one will be cut
471.12 -> let's create our component now so
instead of deep if this should be there
476 -> we will actually have link or report link on
479.68 -> next slash link and we will give it a href of
slash attacks with home written then the same
488.64 -> thing instead of slash we will have card here
we will have card over here save these let's see
498 -> now here comes the question where should we render
our navbar so to render our number we can use our
504.88 -> index page but then we will not have our cart page
right so the best option is to import it in the
512.32 -> app js and then render it here so what i will
do is i'll have wrap this with empty fragments
523.68 -> and here we will have the nail part
532.32 -> and make sure it is getting imported correctly
and then save this our text should have no effect
540.08 -> then go back to our browser
544.08 -> you can now see two links are getting
shown here home and cart if i place
549.44 -> on cart it will go to cart page by google
page now here i want to see something that
557.68 -> normally when applications we develop we create
the applications where whichever page we are on
564.24 -> that page that you should have a underline or
some sort of visual confirmation that we are on
571.04 -> this link right now active link right so if we
have press cart and the cart page is here and
577.2 -> this one should have underlined and when we are on
home page then this home should have the underline
582.8 -> so how to do that so to do that we will
now need to create smart link components
591.2 -> or custom link components this is this will be a
functional component as well smart link two props
599.2 -> one will be children children is safe card we
render card we render home so for that children
605.76 -> and another prop will be either if this is half
like that and then we will leverage the router
613.12 -> so constant router which will be used router we
will actually leverage the use router of nexus
623.68 -> right and then what we will do is uh we will now
return anchor text we will now write an anchor
631.92 -> text now inside this anchor text we will have the
children and the hlf of this anchor tag will be
638.64 -> the original prop we are passing when i said we
are using leveraging use router so that means
644.4 -> when we click on the uh anchor tag we want
to handle that click ourselves so we click
650.88 -> create a handy click function so and one more
thing that i will do is class name so see
660.56 -> when i say i want to render underline for those
links which which is that page so if home page
668.48 -> where i want to underline that home page and when
i am on cart page i want to underline the card
673.92 -> so for that to happen i will use css
classes so here i will check that router
681.6 -> dot s path now router dot aspart returns
say slash slash card like that right
690.24 -> so we will check that is it triple equals to
the internet so is it exactly the to the hrf yes
697.52 -> then we will render in two classes active link
otherwise we will render just in here link
706.48 -> right and as i said we will handle the handle
click so let's create that function now
714.08 -> this will uh we also need the
event so we will prevent default
720.8 -> or event and then what i will do is i
will do something like router dot push
733.68 -> now let's uh instead of printing these links here
whatever which i will write that smart links and
740.24 -> instead of this a text here we will render just
the whole text and this one as well let's save it
747.6 -> we also need to create the css classes right so
what i will do is i will go back to the styles and
753.36 -> here i will go to global.css then i will give this
css nav with the display of legs and our nav link
760.8 -> classes will have a padding and it will also have
a display planes and this active nav link will
767.92 -> have a position of relative y position relative so
that we can have a position of absolute over this
773.68 -> a after which is a saved element to active nearly
and bottom minus one pixel so that it comes a bit
779.12 -> bottom of the original uh content then we
will have the width of 100 so it takes the
785.12 -> entire width of the uh container and uh that is
this nav link or the activity namely height will
792.4 -> be zero per volume so that will be the weakness
of the width of the line and then the background
799.84 -> i want the background color to be red and
content is absolutely necessary if you are
803.44 -> using several level so i have saved
this and let's see it in action now
808.32 -> so here you can see that the home is already
with the red underline and you can click on
813.12 -> cart then you can see the cart is having this
read under that and i will click home once again
820.8 -> and home is having this red underlay right now so
it is working right now surprisingly if you open
830.24 -> the terminal you can see that our test suite
fails and why does it fail because router dot
837.52 -> aspart cannot read property as part of null the
problem is not in our component the problem is
844.24 -> in our tests so for the tasks to pass what we
need to do is we need to mock the use router
852.56 -> so how to do it i will use chest dot more
and i will mock actually need slash router
865.36 -> and make sure here you have the parentheses
here also closing parentheses that's it
873.36 -> and here we will return something like route
will be slash path name will be nothing
880.24 -> query will be nothing spot will be slash
so we are using this as path over here
886.64 -> so we need that as per the field and push will be
a gist dot function and mock function right now
893.76 -> we have done that but we also need to do one more
thing that is chest dot spy on we need to require
901.6 -> our next left router once again and
we'll spy on the use router function
908 -> right use rotor hook actually right now
it is not completed yet we have to create
914.32 -> a mock implementation over here as well i will
use use router dot mock implementation and then
924.96 -> the same thing i will copy the
same thing and i will paste it here
933.2 -> that's it now if i save this and i will
check my text should pass right now
940.8 -> and you can see that my tastes are passing
947.04 -> all my teeth are passing now so why did i do that
or how did i learn it i actually found this on
955.52 -> github and i will link this down below and here
this guitar discussion here is how to move use
962.56 -> router here you can find a lot of solutions and
the solution that fitted my need was this one but
969.68 -> you can use your own there are other solutions as
well you can yourself find out which one helps you
976 -> solve your problem right so the end user might
want to see the car how many items are in his
983.6 -> cart or whenever he is scrolling this page
right normally on online stores if you see
989.92 -> you can see that there would be some
cartridge icon here with the items you need
996.4 -> a number of items that card is already has um
and it is shown normally in the navbar so why
1005.2 -> don't we show it here as well so for that i will
first of all write some tests on what i actually
1011.52 -> intend to do so i will say something like renders
card items count and make sure this is a string
1022.48 -> so wrap them inside these inverted commas and
then render our neighbor now one thing that i
1029.04 -> want to say is how will our neighbor know about
the cart how many items are in our cart for that
1035.36 -> we need to pass our card to the neighbor so how
to do that i will actually pass here the mock card
1045.76 -> card which i will import and here also
we need to actually have the prop right
1052.64 -> we need to actually have the prop over here
card now how will we pass this card so if
1059.04 -> i go to the fjs we already have the card over
here because this is where the card is actually
1065.36 -> getting created in the first place i will pass the
card over here as well then what i will do is i
1070.96 -> will go to the test again and now i want to show
what show the uh let's see the number of items
1077.6 -> is present here so i will go to the mock data and
here the bomb card and the line items total total
1085.6 -> items are five and total unique items is two so
i can do something like i can check here stream
1101.04 -> total unique items so the total unique items is 2.
now normally this test will fail so i will have to
1107.52 -> write something so i write the logic so the logic
will be card dot total items then our test should
1115.68 -> pass i will also open up my browser first and
let's see and here you can see that we have
1121.28 -> only two items so let's add some more items and
you can see here card three is getting shown so
1126.48 -> it's working now here is the error coming cannot
read property total unique items of undefined
1133.52 -> so for that we have to make sure
that cart is already present and and
1140.64 -> then we want to show that card total
unique items and now our test should pass
1148.72 -> so this ensures that our cart is never undefined
if our cart is undefined then it will show nothing
1154.16 -> then we will not have any error and if our
cart is defined then we will show total unique
1158.64 -> attempts and now you can see that all four of
our 14 tests are passing so our neighbor has
1165.52 -> these two tests and both of them are passing
right so till now what we have done is this uh
1173.68 -> displaying this product with the name the price
and add too much butter this nampa over here
1181.52 -> and which is fixed and then this link to cart and
also this cart page looks a bit different because
1189.76 -> what i've done here is inside this cart page i've
imported styles from styles.home.module.css and i
1196.32 -> have used a class name of styles.container over
here and this is the container style so that
1203.12 -> is why it looks a bit different but it looks
good so that's that's it till now we have done
1210.08 -> right in the next video we'll be creating
the checkout page and without any tests
1216.56 -> because i will be demonstrating that way we should
not use tdd that is what i will be demonstrating
1224.88 -> in the next video so the next video will be of
the checkout page and the entire checkout flow
1231.44 -> thanks for watching and to all my subscribers
thanks for supporting see you in the next episode
Source: https://www.youtube.com/watch?v=t1zaQW40AOM