Next.js with React Testing Library, Jest, TypeScript

today I want to provide an introduction to testing in nexjs with jest the react testing library and typescript [Music] hello and welcome I'm Dave today's topic is testing in nexjs using jest the react testing library and typescript and I'll provide links to all resources in the description below I'll also provide a link for you to join my Discord server where you can discuss web development with other students and you can ask questions that I can answer and receive help from other viewers too I look forward to seeing you there the goal of today's lesson is to help you get set up and going with jest in the react testing library in an xjs project using typescript and currently that can be a little difficult so I want to help you navigate some of the trouble spots along the way now if you're interested in a react only testing video let me know in the comments and I'll consider making one with react Veet and v-test as well now the only prerequisite for today is the introduction to jest and unit testing that I have on my channel and I'll provide a link to that video in the description below as well let's start by creating a new next JS project you can see I'm in the parent folder that I have here that is called Next for our tutorials I'm going to type npx create Dash next Dash app at latest and press return okay to proceed yes and after that we need to give the project a name I'm going to call this next testing Dash intro you can name it whatever you want to do we want typescript yes do we want eslint yes Tailwind yes I'm going to use the source directory and I'm going to use app router and then do I want to customize the default import I'll say no to that but we can use an import Alias just with the default settings the way they are no customizations and with that complete let's CD into the directory for this next testing intro project so I'll type CD then dot slash and next Dash testing Dash intro and now on the command line we can see we're now in that next testing intro directory here I can type code and then the period to launch another instance of vs code in that directory which is where we need to be and now that we have that new project launched I'll pull up the new version of vs code that we have open and I can close that other one if I want to as well but here is our new project and we can look in the package Json and see everything thing that is installed as a dependency already but we don't have what we need for testing installed automatically in next JS back in the old days like less than a year ago compared to when I'm making this tutorial now create react app used to come with the testing setup but next.js projects don't and also notice these are dependencies not Dev dependencies and we will be adding Dev dependencies so let's open up a terminal window once again and now we can type in npm I and then Dash capital D for Dev because this will install Dev dependencies now we have several to list and the first three will all start with the at symbol and testing Dash library and then we'll have a slash and the first one is just Dash Dom next one at testing Dash Library slash react and the third one at testing Dash Library Slash use user Dash event after that we also need jest after that we need just Dash environment Dash Dom I'm sorry dot dash JS Dom and then we're also going to need TS Dash jest and that's because we're using typescript as well so now let's press enter and we'll check to see if everything is installed in the package Json when this is complete the installs have completed let's close the terminal window and go to the package Json to make sure we have all six of the dependencies added correctly and you can compare to mine you may have newer versions if you're watching this in the future but this is essentially what you should have now I'm in the next JS GitHub and I'm looking at an issue and that's because this is an issue that I encountered as I was creating this tutorial with the latest version of next JS and with jest when running jest as it says here in the title you might get this error so if you're using the latest and this could be in the future and it may already be fixed then you don't have an issue but of course later on in this tutorial as we try to run the tests if you get this error so take note of this then you will want to do what I'm going to show you to do right now there's a couple of solutions one is to apply this workaround that is down here in some shared code but they use a mock image so then you're going to get some messages about an image component that you may not actually want as well so I found out I can roll back to next JS 13.4.10 and avoid this issue so that's what I'm going to do now let's go back to vs code back in vs code at the package Json you can see I'm at next 13.4.17 and you would hope the issue would be fixed by now but I don't think it is so I encountered this issue when rolling back to each previous version through 11 so I want 13 0.4.10 to make just work the way we all expect it to right now so I'll open up a terminal once again I'm going to say npm I and then I'm going to use next at 13.4.10 go ahead and press enter that will change my next JS version to that version that will work as expected once again I hope in the future the error that I showed you the issue that was in GitHub it said closed because somebody applied the work around however I don't think the workaround should actually close the issue I think it should be addressed and everything should work as it's expected to without adding something additional in your code that isn't documented so that's where I'll leave that and we'll move on now while we're in the package Json let's scroll up to our scripts and let's add a couple of test scripts so underneath lent let's add test and then beside test we're just going to run just for the test test script and then we'll have another one that says test then a colon and watch and this will allow us to keep watching any changes so here we'll have just then the space two dashes and the watch all flag which will allow us to continually run the tests if they change fairly quickly now I'm back in the next JS documentation where I often go during next JS tutorials but what I want to highlight here is that even though we're using the app router I'm in the using Pages router docs that are currently available if I switch to app router we don't have anything about testing under optimizing or optimization yet so that's something that I don't think has been added to the next JS docs or at least not much in the next JS docs at this point so I'm referring to the user's Pages router docs but we don't have to change much here we've already installed the dependencies here and then they talk about creating a just config file which is something we need to do I'm going to create a just dot config.js instead of a DOT MJS and I'll show you why as well but first of all let's just look at the code they have here you can just click copy and copy all of that and we'll put it in our jest config file back in vs code let's create a new file at the same level as the package Json file so click new file and then we want just Dot config.js and we will paste everything into this file now if we were going to use an import like this it would actually want an MJS file which would be a module but I'm going to show you the error I get when I do that in another instance of vs code I have running so what I'm currently experiencing is it says it cannot find the module even though we're using the code exactly as it is in the docs in that jest dot config.mjs file so let's make a few changes and I'll show you how to work around this so just a couple of changes to make here to make everything work we're going to change this import line although we're still going to import from next slash Jess so I'm not sure why it says with this module import that it can't find what we're looking for and of course remember I was using the dot MJS in that error example like you should we're using the dot JS here because we're not going to have a module we're just going to say const next JS equals require and then inside of the quotes we'll once again say next slash jest so we're just using a common JS import here with require instead of the es6 import that we had before after that with our export at the bottom instead of export default we'll say module dot exports equals and set that to the create just config and pass in config and everything should be good now so if you get that error along the way make sure you check the import line and the export line here and it should go away as well but now we're not quite finished inside of the file either so we need this setup files line so let's uncomment this also and remember we got this from the docs we just pasted that in and we need the test environment line but then because we're using typescript we also need a preset line here and there we just say TS Dash jest and we put a comma after that and now we're finished so make sure you have all three of these inside of the config and now we also need to adjust setup file so let's quickly create that and that is just that dot setup dot JS and then inside of this we're just going to have one line and that is import then inside set of quotes we'll have at testing library and then we have just Dom so I can just press tab to get that much but after that we need extend Dash expect and that's all we need in this file now if you remember when we created our project we also said yes to eslint and we have an eslint Json file over here it doesn't have much in it right now but we need to add a few things if we want to go ahead and use eslint throughout the testing as well so let's once again open up the terminal window I can type clear here just to clear all of that out now npmi and Dash D again capital D for a Dev dependency and we're going to install es lint Dash plugin Dash just Dash Dom also es lint Dash plugin Dash testing Dash library and press enter it shouldn't take too long to install those after we do we'll need to go ahead and go back to our eslint file looks like that's complete now and we could check that in the package Json as well so have they been added to our Dev dependencies and yes they have now in the eslint Json file we need to change a couple of things as well we have an extends here and the value is a string well we're going to have more than one value so we need to make this an array so let's wrap this in the array and so then on the final line of course we'll close out the array below now inside of here we've got the first value let's put a comma now let's put our next value which is plug-in colon testing Dash Library slash react and then a comma then on the next line plug in Colon just Dash Dom slash recommended and I need I have recommend there I want to put recommended I believe and save and that's all we should need in this file and now we have the basic setup complete so with that let's create a new directory at the same level as our setup file so I'll click new directory we want two underscores the word tests and two more underscores now if we look in our source directory we have the default project so we can look at this page.tsx and it's the versel page that they provide and there are some links and we can find all this information here is a sentence with the word information if we scroll down a little bit further there are some H2S it says templates explore the next JS playground I think there's one here for docs as well if I keep looking there's a deploy somewhere in here I think there's docs I'll just control F and look for docs one of two let's find the next one there it is so we have an H2 with docs as well I just wanted to find a few landmarks on the page things that we can write a simple test to make sure that they are actually in that page so now that we're ready to write a test let's create our first file in the test directory and let's call this home.test.tsx now why did I call it home instead of page well if we look back at the page and of course every page or every route inside of an xjs app with the app router's named page.tsx so we don't really want to go with that we want to go with what did we name the component well this is export default function ohm so I'm naming the test home.test.tsx and yes these test files do need to end in dot TSX or dot jsx so now to start at the top let's say import and we'll import render and Screen those will come from at testing Dash Library there's libraries and after that we need react so I'll choose that second one in the list from here we also want to import that home component that we're going to test so this is going to come from and we can use the at symbol then the app directory and then it should be the page that we had there now let's go ahead and start writing a test and we can start off with just a simple test to say it and then we'll say should have and remember we looked at docs so we'll say it should have Docs text now we need a function to check for that and it's a Anonymous Arrow function inside of here the first thing we'll do is call render now this is going to render the home component that was exported now there is a pattern for writing tests and it's the triple a pattern so what we'll have here first is the first a which stands for and I'll put it in caps or range so you arrange everything for the test after that you take an action and here I'll say const and this will be my element I'll just say LM equals screen dot get by now there's a lot of options here by the way if you notice since we have the dot notation here for completion but I'm just going to say get by text now we could choose all of those through actually the API as well but notice it has a problem right now we weren't getting all of those and I'll get to that in just a moment here I can choose docs I know it's actually okay but I'll get to the problem in just a moment because there is a problem I should be able to document soon this is the act here let's make that all caps as well so the action we're taking we've arranged our test then we take an action and then the third a is going to be the assertion where we check to make sure everything is what we expected so we'll start off with expect not experimental expect and then inside of this I want my LM and now this would be 2B in the document is what we're checking but we do have an issue here with expect as well so cannot find name expect something isn't quite the way it should be within the last two or three days they have updated just Dom to version 6.0 at least as of the making of this video so you might see something in the future and you may not have this issue however if you do have the current issue that I am documenting right here in this video then what we're going to do is roll this back to a testing Library just Dom that works just a little bit better for us it works as expected so let's open up the terminal window type npm I Dash D and then we'll have to say at testing Dash Library slash just Dash Dom at 5.16.5 let's go ahead and roll back our version to 5.16.5 and we'll see if we have any of these same issues that we were having before so now instead of version 6 5.16.5 I'll scroll up to our home.test I've got no errors so I don't know exactly what the issue is because it's just rolled out in the last few days but I do know if I roll back to a previous version that was working for me I don't have the problems here with typescript highlighting some things that I'm having in that latest version of testing Dash Library slash just Dash Dom so if you have any issues like I just showed you go ahead and try rolling back to that version and I just noticed I put a range in act but I didn't put the assert right here which is the last of the Three A's our trip AAA pattern for writing tests this is a very basic test we're just saying the home component that we have right here that we're rendering in the arrange portion of our test should have the word docs inside of it and we're acting to actually test that by using the screen and then dot get by text and you can check the API for all of the different methods available and we're just checking for this word docs with the capital D by the way this is very specifically this version of docs and then we're checking our assertion were we correct is it in the document as we expected so we can save this test and because this file is in the special directory here tests with two underscores before and after the word it will always check this directory and remember in our scripts we wrote in for testing we have test jest so we can just do npm test now to test that out I'll go back to the test here open up a terminal I should be able to type npm let me do that in lowercase test and our test should run so let's see what happens as we wait for it to run there it goes it's running the test one test passed we have one test Suite which is one file inside of that special directory that file is considered a test suite and everything is as expected now let's write some more tests for that same component I'll close the terminal again and to write more tests inside of our test Suite here our file to test our home component we can wrap this in a describe which is going to describe our component so this will be simple we'll just say describe and this is the home component and then this is an anonymous function that wraps around all of the other tests we have so I'll just take this first test that we created control X to cut Ctrl V to paste it in so now we're describing our home component and it has one test inside but let's create create another one and I'm just going to highlight everything and do shift alt and the down arrow to copy it down and I'll just make a few changes here so besides that it should have docs let's say we saw the word information in that home page that comes with our default project index.js as well so we're going to render home once again as we arrange but we want to make sure it has the word information inside so let's say it should contain the text information so this is actually a word here so I'm going to wrap it in double quotes so we know we're specifically talking about that word and now when we check for that we can check in a different way we're still going to use get by text but let's go ahead and get rid of this specific string and let's put in a reg X we'll just put in information and we can even put a flag after the I would mean it doesn't matter if it's all caps or lowercase it's case insensitive which is what that I means and then we're still going to expect it to be in the document so let's see if it has the word information as well so we can save open up our terminal once again we'll npm test and we're running the test with just let's see what we get we have one suite two tests and both pass so it does indeed have that word information inside okay let's add a third test in our test suite for the home component I will copy this down once again with shift alt and the down arrow now let's say for this test that it should have a heading remember we had some H2S in there so we can search for a specific role for an element so here we'll say should have a heading and now once again our range is just to render the home component but now we're going to do something different instead of get by text we'll do git by roll so we'll make sure this is a heading so specifically in here now we'll say heading and it's going to look for any heading element and now inside we can be more specific we can specify what's inside that heading element here I'm going to say name and let's put something inside the heading or let's look at what we have inside a heading here let's do that so we'll go back to the page and I'll just do control F to find an H2 quickly there's the docs but there's more so let's find the next one here is learn so then it's got a few other things inside of there as well maybe we could find one that doesn't have the extra stuff well I guess docs was there too let's see if we can find it just by using learn or if we're going to need to specify everything this could be a learning experience for all of us let's put this in here and we'll just say name is going to be learn I think this is going to fail because we're not providing everything that's inside so if that's the case I'll show how we can do it and of course provide everything that's inside as well let's go ahead and open this back up we'll do npm test run all three tests in the test suite and we'll see what we get yep one failed so two passed so we had an issue here get by roll is okay but it doesn't have just learn inside of any of the roles there's other things as well so let's go back now to this and I'll just delete everything else that's inside of the H2 as an example now let's see if it goes ahead and completes when we once again run those tests npm test and we're going to run everything and now all three pass so yes it's being specific when we provide that name here inside of the test as well now as I said you want to go to the testing library site and I can show some examples from that let me pull up Chrome real quickly here we go testing Library so you want to go to the docs and then besides getting started you want to go to Frameworks here and inside of Frameworks there's all of these different ones available of course you want to go to react testing Library there's the introduction examples and that will of course help you get started but then what really could help you is the API documentation and it shows all of those different options as well so in the future I'd like to provide some more detailed testing this video was mostly about setup and pointing you in the right direction to learn about testing so in future videos I'd like to dive in and provide more details specifically about writing tests for opponents event handlers hooks async things and all kinds of tests remember to keep striving for Progress over Perfection and a little progress every day will go a very long way please give this video a like if it's helped you and thank you for watching and subscribing you're helping my channel grow have a great day and let's write more code together very soon

Channel: Dave Gray

Views: 52,103

Keywords: next.js react testing library, next.js, nextjs, react, testing, tests, react testing library, jest, jest-dom, next.js 13, nextjs 13, typescript, ts, next.js typescript, react typescript, nextjs react testing library, nextjs react testing libary, next.js jest, nextjs jest, react jest, next.js unit tests, next.js unit testing, nextjs unit tests, nextjs unit testing, testing components, test components, next.js tests, next.js testing, nextjs tests, nextjs testing, react tests, ts-jest

Id: AS79oJ3Fcf0

Length: 25min 3sec (1503 seconds)

Published: Fri Aug 18 2023