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.