Next.js unit tests with Jest and Testing Library typescript

all right so today we're going to be using jest and testing library to test our next.js app that we made that we created using typescript so we're going to be doing some test driven development and I'm going to show you how I usually set up my project for testing and for enabling that kind of stuff with of course coverage and just regular tests so first off you need a nexgs project that's using typescript you can also use JavaScript just regular JS but if you want to you can add typescript this is more of a typescript tutorial since I know most people are struggling with typescript when setting up tests so first off create the project with typescript and you need to install some dependencies now I'm following the testing next.js or docs testing this this path for setting up these these tests next.js has great documentation for it and you also have some examples that you can follow on GitHub where everything is set up so go to that link and install the dependencies here so we will install just and the testing Library essentially now when we install that we have to create two files those two files are the jest config.js not jks JS and the just setup.js now we have these two files the first first off just set up JS is just an import of the testing library and in the jest config we have some explanation to do and it's also fairly simple it's extremely simple but we have this module mapper here which means that we can access components from our project for example if you imagine that we have a components directory we can access the components with a relative path like this so you can say for example slash components slash my button and everything is going to be working now when we set up these two files we also need to set up our package without Json so if we go to our package.json and we go to scripts we can set up a test script and a coverage script so we can so you go to package.json and write these two new lines this is just and just with coverage this basically means that we're going to execute just and we're going to have a coverage report I'll show you that later on in the video when we create these two Scripts we are good to go and we can start writing our tests so now you create a new directory it's called tests you can do it without the underscores or with the underscores so I'm gonna go with test or with underscore underscore test okay and in this directory we can choose how we want to organize our stuff our components and Pages what I like to do is create components and create pages so our components that that we're going to be testing are going to go in and the components directory and the pages are going to go in the page directory so let's look at our app here this is just the default Next Step I'm going to remove everything from here we don't need this uh index page and we're going to be creating some new files so let's say we have a home let's say with we have actually a dashboard Dot index.tsx here we have this component let's just write something simple here actually let's not write something simple here let's first try to make some tests okay so we can say import react from react and we can say export default function dashboard index page and let's just return an empty div with H1 hello world okay so now we have a component written component let's run the server page I'm sorry not a component npn run Dev we go open our server wait for it to load and we we have the server loaded so let's go let's go to dashboard slash dashboard we have hello world now let's say we want a button here below the hello world and we want a paragraph that has a class name of blue what we have to do here is go to our pages go to dashboard because we have the dashboard here right so when we open this the pages here you want it to essentially be the same so we have dashboard and you have index.test.dsx always follow this convention you can also say spec instead of test I'm more of a test person myself so we can go to test here and this is where we have to write our code for the for our page so first off we're going to be importing react that's the first thing we have to do second thing we have to do is import render and screen from the testing library right so we have to import that and let's go over the basics we have to okay we actually just import the testing Library tool so I have testing Library just on okay so we have to create the test we're going to write the describe function and let's describe the what we're testing the entire Suite the entire scope of what we're testing so let's say we're going to describe our dashboard page right so we're going to say dashboard page and we're going to give it a function and in this function we're gonna write some tests so let's say it should render properly meaning that it should just display when we call the function it is with the page it should just be displayed and that's it so let's call it and let's import it first so we're going to import dashboard index page from pages and this this is ugly right this is very ugly we do not we do not want to have this we want to have relative Imports so we're going to say slash Pages slash dashboard but this is not available right it says cannot find module it's corresponding declaration you have to go to Just config and check if the pages are set up here they are and we can also go to our typescript config here and we can set that up too so we can say paths we give it an empty object and we say slash Pages slash this means this character here this means just all everyone and let's give it an array that's going to say they just and then again the star right so let's see if that works now it does so we can control click on it and there you go we have access to relative Imports so you can say slash Pages slash slash fourth and you can access the page so now our page will render correctly if there's a header in inside of it right so we can get this H1 element and check if it has this hello world text right so we have to render the dashboard index page this should be typed in like this we have to render it and now we have to get this H1 elements so we can say const header is equal to and we have to say screen dot get by roll so in this get by role function we say heading which means it will get an element that has the role of heading which means the H1 tag and now we grabbed the H1 tag and we can say expect our header to have text content and let's copy over this let's put it in a variable we're going to say const header text is equal to this and let's say header text okay this is the first test let's run it and let's see what's happened what happens so we're gonna go to our root of the of direct root directory for an xjs app and we're going to say npm run test it will run the tests and we have our first test that says best if we it grabs the H1 element checks for this text here and if it passes if the text is the same then congratulations we got our test working but let's say we have the wrong input here or here so let's say you're writing tests tests inside of here and you want to check if everything is all right and someone came in and changed this to a b c d e f g okay you run the tests again the test will fail right and says expected element to have the text con to the fellow world but we got some gibberish here right so this does make sense so now if something messes up you can run the tests you can see okay that messed up we have to fix this so now we have our first test and now we have to implement what I told earlier let's say we want a button here and a paragraph so we can do this first writing the tests and then writing the code so we should say it should have a disable let's say disabled button here and it should have A P tag with class name of blue so we have these two tests we have to write out we have to write the render again you can also write the render here so before each before each test you should render out the dashboard index page but I don't want to get into the entire Library we just want to have a quick setup of how we're going to do things so we have to render the dashboard index page we have to get the button so button you can also call it button element if it's more convenient for you and we're going to say screen Dot get by role and we're going to say buttons you also have get all by roll which will give you an array of elements that have got that have the button row you can get the the button just by itself like this and let's say if we expect the button element to be disabled okay now we render the page we get the button element and we expect it to be disabled that's first test written and now we have the P tag with the class name of blue again we have to render the page we have to say p element is equal to screen dot get by role and now you're gonna say get an element get an element by the role of paragraphs right this is not going to be working it does not recognize the P tag as a paragraph so you're gonna get it by let's say test ID this is very important so we're going to say get by test ID and we're going to have our element our P element to be with a test ID of let's say paragraph blue I hope I spelled this correctly paragraph blue so we're going to get our element by this test ID when we get the element we want to check if it has a class name of blue so we're going to say expect P element to have class and let's say blue okay now when you write our tests and we check it makes sense what we wrote we're going to run the tests again we're going to say npn run test and one test is passing but the other two are are failing see the test two sweet I cannot pronounce this one has failed this one or the dashboard and it has three tests in total one has passed and two have failed so now we have to write the code to make these tests pass so we're going to say button a hello world button and we're going to say disabled is going to be true so now when we run the tests again it should have two passing right and there you go two tests have passed and one has failed so it tells you that the P element test so it should have a P tag with the class name of blue is failing and the tests above where the two have failed it gives you the P element test and the button element as you see it couldn't find the button and it gives you a suggestion of which elements exist there's a heading element for example here so now let's write A P tag let's say this is our paragraph and let's give it a class name of blue and now let's let's run our tests the tests have failed let's see what happened oh unable to find an element by data test ID paragraph blue so we didn't get the the element by roll we got it by test ID so we have to go to our P tag we're going to say data test ID is equal to the paragraph blue and now let's run the tests again and let's see what's happening and that's the best it took 0.889 seconds and it got the paragraph by this test ID and checked the class name we can also say that we have to expect the P element to have text content of what do we have here off this is our paragraph okay we run the tests again and the tests have been working and everything is fine so this is essentially how you're going to write your tests if you have a component here that's going to be input slash index .tsx and you have your component that's in input for example function input return and input right this is just an example and you're gonna export default input of course you need to import react at the top if you have this component and you want to test it you have to go to tests components and then you're going to write input dot DSX Dot DOT test dot DSX and you can do the same you import these three at the top you import your component but again you have this problem you have this problem for the components directory you go to your tsconfig Json you add slash components slash star I don't know if this is called star professionally but I'm going to call it start components and then again okay so what is this the leading side it probably wants it like this I'm just thinking you're just going to ignore it you can check the documentation how it should be exactly and now you can access the input so when you write input you see it gives you the components input and now you can write describe and it for example should have the exact text that you type in and Etc so that's basically how you write your tests and how you should organize your files snapshot testing marks end-to-end testing that's all different and you should check check up and read more on it but essentially you should always look at this example from that nexjs offers from the official documentation and now you know how to use just and testing library with nextges

Channel: Tenacity Dev

Views: 33,422

Keywords: Nextjs, Next.js, next js, jest, testing-library, react-testing-library, tests, test, ts, typescript

Id: mJn0B7mXmDI

Length: 17min 32sec (1052 seconds)

Published: Sat Dec 17 2022