Unit Tesing with Jest in React Typescript

Sahara Banu — Fri, 04 Mar 2022 07:14:36 +0000

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.

Typescript and tailwind css

Sahara Banu — Thu, 24 Feb 2022 13:10:38 +0000

What is Typescript?
Typescript is a programming language, It is an open source and it is a superset of javascript.It adds optional static typig to hte language. Actually it is designed for the development of large applications na transcompiles to javascript.

Why do I use Typescript in large application?
At first , I will say, typescript simplifies to javascript.It helps us to write clean and properly structured code.It makes code easier to read and understand. It is very smooth, flexible and with almost no overhead rather than migration process from JavaScript.
It has some benefits; like:

WE can avoid errors like 'undefined'is not a function. *WE can directly see our coding errors in our visual studio code.It is easier to refactor code without breaking it significantly.
Typescript upholds interfaces.
TypeScript has better documentation for APIs which is in a state of harmony with a source code. A few organizations report a decrease in bugs when they change to TypeScript.
Typescript runs in any program or javascript.

How to install typescript in our project?

<> If we want to set typescript with HTML , then we will install only this
npm i typescript
<> If we set want to typescript with React Framework ,then
npx create-react-app my-app --template typescript
or

yarn create react-app my-app --template typescript
And If we want ro set typescript with previous any project,then we can follow this link;

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

or
yarn add typescript @types/node @types/react @types/react-dom @types/jest

Types of Typescript
The Typescript has some common built-in data types which are given below:

Number *String * boolean * null *undefined *enum *void * never * any *Array *unknown * any.

We can declare these types in variable.If we don't declare type with variable, then en error has occured. so, we must declare type with variable. Example;
let countryName:string = "Bangladesh";
let isBeautiful:boolean=true;
let age:number = 25; and etc.

Interface of Typescript
Interfaces are able to describe the widw range of shapes that JavaScript objects can take. When we declare an object ,then we need interface or type to do our code neat and clean.

We also declare in this system. But we always try to declare in interface rather than type.

I have explored typescript and have done some projects using typescript and I am still learning typescript to do better performance. From this, I shared some code example of my Todo App.

At last, we use typescript rather than JavaScript in our project because typescript is a superset of javascript.We can code both javascript and typescript in typescript. We can declare what types of my code. We can solve error directly in our code.The code is easier to refactor.It supports third-parties package.TypeScript performs type checks at compilation time, it helps prevent runtime errors before the application is even started. Those benefits increase time for writing Typescript code with higher requirements for all the developer's qualification.

Tailwind Css

What is Tailwind CSS?
Tailwind css is utility-first css framework.It is used for rapidly building custom user interface(UI). It is a highly customizable, low-level css framework that gives us more flexibility designs without boring opinionated styles that we have to fight to override. Personally, I like tailwind css framework.

How to install tailwind css in our project?
If we want to set i HTML, tailwind setup is very complex to me but its benefits many. So,we will setup tailwind css installation with carefully and will move step by step. We must have to read more and more tailwind css documentation and how to install it.
We can follow this link: https://tailwindcss.com/docs/installation

If we want to setup tailwind css with react. Then, we can follw this link: https://tailwindcss.com/docs/guides/create-react-app
or
we can follow the youtube vedio.
https://www.youtube.com/watch?v=YL5deOIXbPc

I have used tailwind css in my react typescript project.There are many free designable components in tailwind css that helps us in many ways for styling in our project. We can do easily responsive for any devices using tailwind css. Some code of my project;

At last, I can say in this blog.it is very helpful for begginers.We can use tailwind css framework with any frontend framework.Typescript is very popular language and superset of JavaScript. Its' demand is increasing day by day.

DEV Community: Sahara Banu

Unit Tesing with Jest in React Typescript

Typescript and tailwind css