How to test Next.js link component using Jest

InterTuts

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.

Transcript

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

Category

Transcript

Recommended