How to setup jest test case in NextJS

Introduction

The developers are used to writing test cases for their components, that is for the validation of the components to ensure the behavior. These test cases will be prior test cases rather than the actual test cases.

We are clear about what is the need for unit test cases. So next we can discuss how to implement and run the unit test cases in your software program.

Here I am particularly going to explain the unit test cases for ReactJS applications and supporting unit test case library.

The widely used testing framework is Jest and it is very easy to handle the test cases. Jest is completing the process with help of other libraries like enzyme for rendering the components.

• Please follow the below steps to set up the Jest framework in your ReactJS application.

• Please add the below packages to your applications

create/add a step "test" for running the test cases in package.json on script section along with other commands

 "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "test": "jest" ---> for running the test cases
  },

Now, the initial step is done. there for we can start to create the test files. basically the test files should create the name with [filename].test.js

see the below coding snippet this is how our test file look like.

import React from "react";
import { ContactForm } from "./index"; -- ContactForm is accepting the personal details.
import { shallow } from "enzyme";

describe("enter you contact details", () => {
  const element = shallow(<VCardForm />);
  it("should be able to find first name textbox", () => {
    const renderComponent = element.find("input");
    expect(renderComponent.at(0).props().name).toBe("firstName");
  });
});

Now, Run the test script from terminal by entering npm run test

But unfortunetly we caught an error similar to the below error statement

So, How to fix: Enzyme expects an adapter to be configured and what does it meant ?

The adapter abstracts away anything that changes based on the React version so the core enzyme code can stay the same. This is the need of Enzyme adapter.

To fix the error can be done in few lines of code and need a adapter package based on your React version.

For this example, I have installed npm i @wojtekmaj/enzyme-adapter-react-17

then create a file setupTests.js in the root of the application.

import * as enzyme from "enzyme";
import * as Adapter from "@wojtekmaj/enzyme-adapter-react-17";

enzyme.configure({ adapter: new Adapter.default() });

To make this adapter configuration to work add the file reference to the jest.config.js

So create jest.config.js file to add certain configuration for the unit test cases.

const config = {
  setupFilesAfterEnv: ["<rootDir>/setupTests.js"],
  transform: {
    "^.+\\.(js|jsx|ts|tsx)$": ["babel-jest", { presets: ["next/babel"] }],
  },
};

module.exports = config;

presets: ["next/babel"] this is preset plugin for NextJS application, this can be declared either in .babelrc file or within the configuration file. This is only the major part for NextJS and rest everything similar as normal React applications.

Now we are good to run the test cases against to our testcases.

PASS  src/components/ContactForm.test.js
enter you contact details
  √ should be able to find first name textbox (53 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.408 s
Ran all test suites.

Thank you, I hope this instruction is helps to set up the unit test case for your NextJS application.