# Build a React + Redux App with TypeScript and Redux Form — Part 2
Source: NidhinKumar(Canva)
### Overview
In Part 1 you have seen how to create a Redux Form and add validations and pass the data to reducers with Redux persist. Now we will see how to write tests for the pages we have created from scratch. If you are new [have a look at part 1](https://levelup.gitconnected.com/react-js-typescript-redux-redux-form-jest-e522995ebe36)
> This post contains a lot of code. Don’t be panic you can do it :)
### Objectives
* Install the plugins needed for Jest
* Setting the Jest environment
* Writing test case for Redux Form
* Writing test case for the Redux action and reducers
* References
### 1\. Installing the plugins needed for Jest
We will install the plugins needed for jest
* [jest](https://www.npmjs.com/package/jest)
* [enzyme](https://www.npmjs.com/package/enzyme)
* [enzyme-adapter-react-16](https://www.npmjs.com/package/enzyme-adapter-react-16)
* [enzyme-to-json](https://www.npmjs.com/package/enzyme-to-json)
* [react-test-renderer](https://www.npmjs.com/package/react-test-renderer)
* [redux-mock-store](https://www.npmjs.com/package/redux-mock-store)
* [ts-jest](https://www.npmjs.com/package/ts-jest)
Since we are using TypeScript, we have to install the type packages for the plugins as well. Once the plugins and their types are installed, it’s time to set the Jest environment.
### 2\. Setting the Jest environment
Create a folder named test in the root directory and then create subfolders like below
* fixtures
* pages
* redux
* setup
#### setup
Inside the setup, folder create the files like below
* fileMock.js
* styleMock.js
* test-setup.js
* test-shim.js
1. Inside **fileMock.js** add the following code:
module.exports = 'test-file-stub';
2\. Inside **styleMock.js** add the following code:
module.exports = {};
The reason for using style mock is that we don’t want to test the CSS files so we are mocking the styles part.
3\. Inside **test-setup.js** add the following code:
4\. Inside test-shim.js add the following code:
Once you have added the codes in setup files go to `package.json`.
It should be placed above `devDependencies` and in scripts change the test part to `jest`.
And the whole package looks like this:
Once you have updated the `package.json`, go to `tsconfig.json` and change the `jsx` option from `preserve` to `react` like below:
Now we have completed the Jest setup, and it’s time to write to specs for the pages which we have created earlier (Part 1).
### 3\. Writing test cases for Redux Form
We will write the test case for the below files which we have created earlier
* User.test.tsx
* Form.test.tsx
* PersonDetailForm.test.tsx
* AccountDetailForm.test.tsx
#### User.test.tsx
Inside **test -> pages** create a new folder named **User** and then create a new file named **User.test.tsx**
So what we have done above is:
1. We have imported the user component which we have created earlier.
2. We have used mount to check whether the component is defined or not.
We can use either use `shallow` or `mount`. If you want to view the top level of a component we can use **shallow.** But if you want to view in-depth then you can use **mount.** Have a look at the below video:
#### Form.test.tsx
In the form component, we will test the stepper components and its `active` state:
Here we have checked whether we have the stepper component and we have checked whether the personal details tab is active or not.
#### PersonDetailForm.test.tsx
In this component, we will split the test into 2 parts:
1. Testing the form components
2\. Simulating the form with values and test
#### **Testing the form components**
In this, we will test the form components labels, type, and placeholders.
Here we have checked the input fields type, placeholder, label as well as the button type and text.
#### **Simulating the form with values and test**
In this part, we will simulate the forms with values and check whether the validation part works or not.
In the above test case, we have simulated each input and then we have checked whether the validation part as well as the validation text works or not.
If you see the validation spec code we have changed one thing. Instead of using **PersonalDetailForm** we have used **ReduxPersonalDetailForm**
Also if you look at the import code we have two imports `PersonalDetailForm` and `ReduxPersonalDetailForm` which are using the same component `PersonalDetailForm`.
Import
You might be wondering why we need a duplicate import. Have a look at this video to understand:
#### AccountDetailForm.test.tsx
We will write the spec for the `AccountDetailForm` component. The implementation is similar to the components we have already tested.
Now we have completed writing specs for the forms which we have created earlier. Now it’s time to write specs for the redux actions and reducers.
### 4\. Writing test case for the Redux action and reducers
Since we are going to test the Redux actions, it is good to install the Redux mock store which we have done in step 1.
Create a folder named **redux** in the **test** folder and then create another two folders namely
* actions
* reducers
Create another folder named **fixtures** in the **test** folder and then create another folder named **User.**
Inside the User folder, create a file named **UserData.ts** and add the below code:
So what we have done here is we have created a dummy response which will be passed to actions as well as to reducers.
Once the data are added in fixtures go to actions and create a new file named **AddUser.action.test.ts** and add the below code:
What we have done in the above code is that we have used the Redux mock store, and then we imported the `addUser` redux action and the fixture data.
We have tested the data which is dispatched using the Redux action and the data which gets stored inside the user reducer are the same or not.
We have completed testing the redux actions part, and now it is time to write specs for the reducers.
Inside test -> redux -> reducers folder create a file named **AddUser.reducer.test.ts** and add the below code:
What we have done in the above code is checking the data which we are receiving from the redux action and the data which gets stored into the reducer are the same.
It looks the same as what we have done in the redux actions, but imagine if you are having a reducer which will add the data to the list, edit the data, delete the data from the list. It would be good if we write specs for the reducers also so that we will know how the data flows into the reducers during each action.
Now it’s time to test whether all our test cases which we have written are working as expected.
Congratulations you have learned how to write test case for your react js application using jest in typescript. Go ahead and test more.
Happy coding :)
### 5\. References
#### Git Link
[**nidhinkumar06/ReduxFormJest**
*This project was bootstrapped with Create React App. In the project directory, you can run: Runs the app in the…*github.com](https://github.com/nidhinkumar06/ReduxFormJest/tree/jest-setup "https://github.com/nidhinkumar06/ReduxFormJest/tree/jest-setup")[](https://github.com/nidhinkumar06/ReduxFormJest/tree/jest-setup)
[**Jest cheatsheet**
*npm install --save-dev jest babel-jest /\* Add to package.json \*/ "scripts": { "test": "jest" } # Run your tests npm…*devhints.io](https://devhints.io/jest "https://devhints.io/jest")[](https://devhints.io/jest)
[**Enzyme cheatsheet**
*import {shallow, mount} from 'enzyme' wrap = shallow( ) Shallow wrapping doesn't descend down to sub-components. A full…*devhints.io](https://devhints.io/enzyme "https://devhints.io/enzyme")[](https://devhints.io/enzyme)
[**Testing React / Redux Apps with Jest & Enzyme - Part 3: Testing Redux Actions**
*This is part 3 of a 4-part series on testing React / Redux apps using both Jest and Enzyme for a robust testing…*alligator.io](https://alligator.io/react/testing-redux-actions/ "https://alligator.io/react/testing-redux-actions/")[](https://alligator.io/react/testing-redux-actions/)