How to test Next.js link component using Jest
This video shows how to test the Next.js link component using Jest. I'm verifying if the link contains correct url and the text with next-intl is rendered correctly.
Category
🦄
CreativityTranscript
00:00In this video, I wish to show an easy way to verify if a link is rendered correctly in Next.js
00:14For this purpose, I will use Jest
00:20To create the link, I'm using the Next.Link component
00:30And for the text, I'm using Next.InternationalLibrary
00:39In my test file, I will use await to load the component
00:57Where I have an asynchronous function to load the screens
01:10Then, I will render the component
01:16And will look for the dashboard screen in the link text
01:31Here I will verify if the dashboard text exists
01:38And then will verify if the URL is correct
01:46I have explained even in my previous video
01:51That I have a setup file in the Jest configuration file
01:59Where I have global mocks and one is for the Next.InternationalLibrary
02:08I have created it to simulate the getTranslations function
02:17Which is used to render the prints in JSON files
02:25This is useful to render the text during the tests
02:34Now, I will run a test
02:39The test is passed correctly