Unit test Next.js with Jest and Enzyme

Simple setup unit test on Next.js + TypeScript with Jest and Enzyme

Install as dev dependency

First, you need to install Next.js here for this setup I write up with TypeScript

After that you need to install as dev dependencies, jest, babel-jest, babel-core, babel-preset-env, and babel-preset-react.

npm install --save-dev jest babel-jest babel-core babel-preset-env babel-preset-react

Put jest here to test as well

Install as dev dependency enzyme, enzyme-adapter-react-16

npm install --save-dev enzyme enzyme-adapter-react-16

If you write up with TypeScript you need to install as dev dependencies typescript, ts-jest, @types/enzyme, @types/enzyme-adapter-react-16, @types/jest

npm install --save-dev typescript ts-jest @types/enzyme @types/enzyme-adapter-react-16 @types/jest

Configuring Jest

create jest.config.js file on your root folder then put this code to you file.

If you write up with TypeScript you need to create jest.tsconfig.json file on root folder and put this code to you file.

Configuring Enzyme

create enzyme.js on root folder and put this code to you file. Adapters and configurations need to be setup if using React 013, 014, 15 or 16. The setup is the same each of these versions if React 15 should setup with enzyme-adapter-react-15

Let’s Test Component

Create component to render text to DOM element in pages directory.

Then create __tests__ folder on root folder and create index.spec.tsx in __tests__ directory.

After finish write up the test run npm run test on you terminal