✨Crafting Code with a Smile for 8 Years:) Merging the Formal Dance of Angular, the Playful Rhythms of React, and the Next-level Moves of Next.js 🚀
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
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
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
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:
We have imported the user component which we have created earlier.
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:
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")
[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")
[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")
[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/")
