How to test in Next.js if an image is rendered correctly using Jest
In this video I'm showing how I'm testing if an image is rendered correctly. For testing I'm using Jest and @testing-library/react.
I'm not using the Next.js Image Component. Is Chakra Image Component.
I'm not using the Next.js Image Component. Is Chakra Image Component.
Category
🦄
CreativityTranscript
00:00In my next JS component, I want to verify if an image is rendered correctly.
00:15For this purpose, I'm using REST.
00:20I have created a test file containing a test case for this component.
00:35In my test case, I'm loading the page component using the await keyword because my component contains asynchronous functions.
00:55Then, I'm rendering the component into a virtual DOM, which allows to test the component without needing to run a full browser.
01:14Next, I'm using the getByAlt text method of the screen object to look for the image in the component using the image alt.
01:35And this is the code used to verify if the image exists and verify if the image src is correct.
01:54Finally, I will run a test.
02:05And the test is saying that the image is rendered correctly.