Testing Next.js Image Component

When testing the Next.js Image component, you can ensure the correct image source is being rendered by using assertions. Here's an example of how you might test it:

expect(
  screen.getByTestId('imageId').getAttribute('src')
).toContain(encodeURIComponent(imageSrc));

This assertion checks if the src attribute of the image component with the specified test ID (imageId) contains the encoded image source (imageSrc). This test helps verify that the correct image is being displayed by the Next.js Image component.

Since you've made it this far, sharing this article on your favorite social media network would be highly appreciated 💖!

Published 04 Dec 2023