For Jest usage in Next.js we need to install these packages jest, jest-environment-jsdom, @testing-library/react, @testing-library/dom and @testing-library/jest-dom.
If we have installed Next with the option with-jest, the next/jest.js will be installed too. The next/jest.js package helps integrate Jest with a Next.js application.
This video shows how to test a Next.js component which I have copied from the documentation. In the following videos I will shows tests with my components.
If we have installed Next with the option with-jest, the next/jest.js will be installed too. The next/jest.js package helps integrate Jest with a Next.js application.
This video shows how to test a Next.js component which I have copied from the documentation. In the following videos I will shows tests with my components.
Category
🦄
CreativityTranscript
00:00To test Next.js components with Jest, we need to install several additional packages.
00:10For example, this is used to simulate the browser environment.
00:22This renders the React components and allows to interact with them.
00:32Testing library DOM is used to interact with the DOM.
00:40And the last provides features to write tests in the test files.
00:50The installation is easy.
01:06In the Jest configuration file,
01:14I'm using Next.js package,
01:22which helps integrate Jest with Next.js application.
01:34This path is for the Next.js configuration file.
01:48To test the Next.js components,
01:54I have created a tests directory in each directory containing components.
02:04I will start the tests within these tests directories.
02:14I will start to test the Next.js components
02:20using an official example from the Next.js documentation.
02:30The test is copied too from the documentation.
02:36Here I'm using the render function to render the page component.
02:48Then I'm using this code,
02:52which tries to find an element with the role of heading and level 1.
03:06And this verifies if the heading 1 is present in this component.
03:20Let's run a test.
03:30The test is passed correctly.
03:36In my following videos, I will show tests with my components.