Unit Tesing with Jest in React Typescript

#unit #testing #react #typescript

What is Unit Testing?
A unit test is a way of testing unit where a section of code or components are tested. Its' purpose is to test each unit or function. A unit is the smallest testable part of an application. It mainly has one or a few inputs and produces a single output.Unit Testing is done during the development of an application by the developers.

Some benefits of Unit testing are:

Unit test tend to be fast, providing quick feedback to engineers.
Good unit tests serve as project documentation
Unit testing makes refactoring possible.
Unit tests help to fix bugs early in the development cycle and save costs.

How does Typescript Unit Testing differ from JavaScript Unit Testing?
JavaScript is programming language and Typescript is superset of javaScript.TypeScript unit testing differs from regular JavaScript unit testing in at least two ways. First of all, by leveraging static typing, a whole class of errors becomes impossible. So, you probably end up writing fewer tests. Also, TypeScript unit testing requires you to install some additional packages, which are needed to make the unit testing tools work with non-standard JavaScript syntax.

How to Write a Unit Testing in our react Typescript Project
At first, We have to create a react app with typescript.And then, We need some dependencies. One of them is Jest.

JEST:
Jest is a universal testing platform, with the ability to adapt to any JavaScript library or framework. It is used by many companies.Jest provides the ability to perform these tasks via functions like beforeAll, beforeEach, afterAll, and afterEach.

We have to follow, This pattern(Arrrage,Act,Asserts) is a common way of writing unit tests for a method under test.
The Arrange section of a unit test method initializes objects and sets the value of the data that is passed to the method under test.
The Act section invokes the method under test with the arranged parameters.
The Assert section verifies that the action of the method under test behaves as expected.

Unit Testing Component Example

If we want to add unit testing in our React TypeScript.Normally we have to follow 4 steps.

1. First Step Install

*npx create-react-app my-app-name --template typescript
or
yarn create react-app my-app-name --template typescript

and then

npm install --save-dev jest @types/jest @babel/preset-typescript

2. Second Step Add Babel Preset
Since, we have installed babel preset, so we have to add this in our project. We can use jest.config.js without babel.

We have to create a file babel.config.js near by package.json and add this and save.

module.exports={
"presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
"plugins": []
}

and we have also to add in package.json

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject"
},

3. Third Step Add Test
We have to test one section of code. So we can create a file that means if we want to test this component, and we will create there a file like(login.test.tsx) or can do in App.test.tsx .

last Step Test In Visual Code terminal, we can run this command. npm test If everything is ok, then result will be shown pass.If in any case,result gives fail, then we will try to fix this.For solving this bug, we can follow Stackoverflow website .It is really helpfull for any bug fixing. And we can serach Debug unit testing in Vscode in react app. I have done a test and finally complete it.

Summary
It is my first practise in unit testing.I have failed many times and finally I have succeeded.So, Please comment me how can I improve my lackings.I am still learning and want to know more About Unit Testing.Really It's very interesting. I enjoy it when I practise it.
Overall, I think this pattern can help you write tests faster and with less repetition.