Exercise: Troubleshooting Next.js Components with Jest

Problem statement

In the Next.js application, we have the essential component ArticleCard responsible for displaying articles on the website. Additionally, a crucial utility function called composeArticleSlug is designed to create a user-friendly URL string, often called a slug, based on an article’s title. Your task is to test the ArticleCard component and the composeArticleSlug function using the Jest testing framework.

Let’s look at the tasks in the following sections.

Testing the ArticleCard component

The ArticleCard component is responsible for displaying articles. You want to write a test to ensure that this component is generating the article image correctly and has an image of the author.

In this test, you need to verify two things:

• Check if the image displayed by the ArticleCard is a valid image (not something else).

• Ensure that there’s an image of the author linked to the article.

To complete this task, you’ll need to make changes in the components/ArticleCard/tests/index.test.js file.

Testing the composeArticleSlug function

The function composeArticleSlug is responsible for creating a URL-friendly string (usually called a slug) based on an article’s title.

In this test, the objective is to confirm that when you utilize the composeArticleSlug function with an article’s title, it doesn’t return an empty string. In simpler terms, the test should verify that the function provides a valid and non-empty URL slug.

To complete this task, you’ll need to make changes in the utils/tests/index.test.js file.

Try it yourself

Please write the code in the necessary files. If you get stuck, you can also refer to the solution.

Click the “Run” button below to execute the code.