
### 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 <a href="https://jestjs.io/">Jest</a> 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
<div class="list-number">

- <a href="https://www.npmjs.com/package/jest" target="_blank">Jest</a>
- <a href="https://www.npmjs.com/package/enzyme" target="_blank">Enzyme</a>

</div>

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

```javascript
 "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.

```javascript
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

<div class="highlight-error">
Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none.
To configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })`
before using any of Enzyme's top level APIs, where `Adapter` is the adapter
corresponding to the library currently being tested.

For example:

import Adapter from 'enzyme-adapter-react-15'; To find out more about this,
see https://airbnb.io/enzyme/docs/installation/index.html

</div>

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.

```javascript
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.

```javascript
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.

```javascript

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.


Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none.

How to setup jest test case in NextJS

- ## **Writing test cases for modal popup in Jest**
Writing the test cases and asserting are very easy right after mounting the component. But some cases we will not recieve any result after mounting the component. that means mounted component will return null.

this only the reason I thought to share some steps to resolve the problem if anybody facing this already.

E.g.:- Modal popups, bootstrap modal and modal window

The modal winow or modal popup will rendered the top layer of the entire view or out of the body. So the Modal popup won't be captured at the time of mount operation. To capture the Modal popup we required additional settings before mounting the Modal component.

settings are nothing but mock function we have to write it.

I have demostrated the below jest mock function for the modal popup

```javascript
import React from 'react'
import { mount } from 'enzymme'
import { MemoryRouter } from 'react-router'
import SampleComponent from 'samplecomponent' // contains Modal component

describe('Test SampleComponent', () => {
    it('should load the Component', () => {
        const elemment = mount(<SampleComponent />)
        expect(element.html()).not.toBeNull()
    })
})
```

in the above code the variable *element* will not recieve the *Modal* component, eventually the test case will fail.

**How to fix the error then ?**

To fix the test case we have to add the mock function for Modal to the component. Given example in the below code snippet.

```javascript
import React from 'react'
import { mount } from 'enzymme'
import { MemoryRouter } from 'react-router'
import SampleComponent from 'samplecomponent' // contains Modal component

jest.mock('component library were the Modal is imported', ()=>{
    function Modal({children}) {
       return <div>{children}</div>
    }
    Modal.Header = 'Modal.Header'
    Modal.Body = 'Modal.Body'
    Modal.Footer = 'Modal.Footer'

    return Modal
})

describe('Test SampleComponent', () => {
    it('should load the Component', () => {
        const elemment = mount(<SampleComponent />)
        expect(element.html()).not.toBeNull()
    })
})
```

Hope this solution helped for your test case of bootstrap modal or other modal window pluggins


Writing test cases for modal popup in jest

Writing test cases for modal popup in Jest

- ## **Uncaught TypeError: Cannot read property 'location' of undefined**
It is a common error when you executing the test cases for useLocation in Jest. It is not like any other hooks since it is working with the router.(```'react-router-dom'```) it requres some extra input before running the test cases.

# **what is useLocation ?**

This isbone react hook, this hook will returns the current location object. This can be useful if you'd like to perform some side effect whenever the current location changes.

```javascript
import { useLocation } from 'react-router-dom'
```
Look at to the below sample test case snippet.

let consider `useLocation` has been used in the component `SampleComponent` and the below test case is for testing the component using mount function of enzyme

```javascript
import React from 'react'
import { mount } from 'enzymme'
import SampleComponent from 'samplecomponent'

describe('Test SampleComponent', () => {
    it('should load the Component', () => {
        const elemment = mount(<SampleComponent />)
        expect(element.html()).not.toBeNull()
    })
})
```
the result of the above code will be failed and says **Uncaught TypeError: Cannot read property 'location' of undefined**

because the program have used useLocation and when writing test case for that component also need to provide the initial value

lets solve the issue by a simple step, that nothing but wrap the compoent with `MemoryRouter`.
```javascript
import { MemoryRouter } from 'react-router'
```

then the program would be like this.

```javascript
import React from 'react'
import { mount } from 'enzymme'
import { MemoryRouter } from 'react-router'
import SampleComponent from 'samplecomponent' // the component contains useLocation hook

describe('Test SampleComponent', () => {
    it('should load the Component', () => {
        const elemment = mount(
            <MemoryRouter initialEntries={['/']}>
                <SampleComponent />
            </MemoryRouter>
        )
        expect(element.html()).not.toBeNull()
    })
})
```
MemoryRouter is a wrapper function which will help us to provide the correct input to the useLocation hook of the component.





Cannot read property location of undefined, this is an common test cases error in react jest while using useLocation hook in your react component

More Stories related to 'jest'

Also read the similar topics