DEV Community: Lukman Hossain

React Testing Library, Setup, Why it is important in React?

Lukman Hossain — Fri, 04 Mar 2022 22:20:00 +0000

Introduction:

React Testing Library builds on top of DOM Testing Library by adding APIs for working with React components.

Install React Library:

Importance Of Testing:

Catch Bugs Easily
Increases Confidence in Application
Speeds up QA Time
Can Serve as Documentations

Types of Tests:

There are 3 types of Testing-

Unit Tests
Integration Tests
End to End (E2E) Tests

Structure of Tests:

Package.Json file 1st Part

Package.Json file 2nd Part

Here is an example of a test that uses all of these and expect our json data to be rendered on our page and be defined.

Priority:

Priority is different ways

Accessible by everyone
• getByRole
• getByLabelText
• getByPlaceholderText
• getByText
Semantic Queries
• getByAltText
• getByTitle
Test Id
• getByTestId

Assertions:

The assertions will determine if the test pass or fail, they are essential part of the test.

Let’s see an example of the assertion syntax:

Others Example of assertions:

• In this case expect() method have the ‘text content of the element‘ as a parameter.
• Then the matcher is .toBe() and the parameter is a string ‘hola‘, so, if the text content of the element is equal to ‘hola’ then the assertion pass.

React Testing Library or apps with Jest:

Jest-DOM

Jest-DOM comes with ‘create-react-app’ and use the src/setupTests.js to import Jest-DOM before each test and this means that the Jest matchers are available ables for every test.
So the next examples are DOM-based matchers:
• toBeDisabled
• toBeEnabled
• toBeEmpty
• toBeEmptyDOMElement
• toBeInTheDocument
• toBeInvalid
• toBeRequired
• toBeValid
• toBeVisible
• toContainElement
• toContainHTML
• toHaveAttribute
• toHaveClass
• toHaveFocus
• toHaveFormValues
• toHaveStyle
• toHaveTextContent
• toHaveValue
• toHaveDisplayValue
• toBeChecked
• toBePartiallyChecked
• toHaveDescription

Happy Learning !!

What are Redux, Typescript, Webpack, WebSocket and Base64? How we install or use in our New and Existing project?

Lukman Hossain — Fri, 25 Feb 2022 13:16:00 +0000

I just learned new technology and am still learning. Those are Redux, Typescript, Webpack, WebSocket and Base64. Now I write below some short notes about this topic from their documentation.

Redux:

Redux - A predictable state container for js apps. It works with any UI layer; it has a large ecosystem of addons to fit our needs. It helps us to write application that behave consistently, run in different environments and easy to test. It’s devtools make easy to trace when, where, why and how our application’s state changed.

Typescript:

TypeScript is a strongly typed programming language that builds on javascript. It gives us better tooling at any scale.

Webpack:

It is a module bundler. It’s mainly used to bundle JavaScript files for usage in a browser.

WebSocket:

The WebSocket API is an advanced technology that makes it possible to open a two interactive communication session between the user’s browser and a server. With this API, we can send messages to a server and receive event-driven responses without having to poll the server for a reply.

Base64:

It is a encode-decode schemes that represent binary data in sequences of 24 bits that can be by four 6-bit Base64 digits.

How to add Redux in ours react project ?

React Redux is the official React UI bindings layer for Redux. Below I take a image for installation Redux on React in a new Project

Installation:

For existing React project we can follow below steps for installation:

How to add Typescript in ours react project ?

When we install or add typescript command on our react project. This command is automatically setup typescript compiler, webpack, babel etc. on our react project

Installation:

After installation we see that our file extension will be on .tsx format. But if we rename file .ts format; this code will show error. Because typescript file name will be on .tsx extension format.. Than we will continue our projects.

Setup React with webpack and babel:

Setup React. - Setup folder with npm and git. - Create HTML and Javascript (React) file.
Setup webpack. - Install webpack. - Add configuration file.
Setup Babel. - Install babel. - Configure webpack to use babel.
Build and run.
Extra useful configs. - Babel config for CSS files.

Happy learning. Best of luck everyone.

What is Node JS ?

Lukman Hossain — Thu, 30 Dec 2021 15:30:00 +0000

Node JS:

Node JS is an extremely powerful framework developed on Chrome’s V8 JavaScript engine that compiles the JavaScript directly into the native machine code. It is a lightweight framework used for creating server-side web applications and extends JavaScript API to offer usual server-side functionalities. It is generally used for large-scale application development, especially for video streaming sites, single-page applications, and other web applications.

What are the Difference between Nodejs and JavaScript ?

NodeJS:

Type: Interpreter and environment for JS.
Utility: Used for accessing or performing any non-blocking operation of any operating system.
Running Engine: V8(Google Chrome).

JavaScript:

Type: Programming Language.
Utility: Used for a client-side activity for web application.
Running Engine: Firefox, Safari, V8(Google Chrome), etc.

Why Node.js is single-threaded ?

Node.js uses a single-threaded model in order to support async processing. With async processing, an application can perform better and is more scalable under web loads. Thus, Node.js makes use of a single-threaded model approach rather than typical thread-based implementation.

Where Node.js can be used ?

Node.js can be used to develop:

Real-Time Web Applications
Network Applications
Distributed Systems
General Purpose Applications

Benefits of using Node.js !

Fast: Node.js is built on Google Chrome’s V8 JavaScript Engine which makes its library very fast in code execution.
Asynchronous: Node.js based server never waits for an API to return data thus making it asynchronous.
Scalable: It is highly scalable because of its event mechanism which helps the server to respond in a non-blocking way.
Open Source: Node.js has an extensive open source community which has contributed to producing some excellent modules to add additional capabilities to Node.js applications.
No Buffering: Node.js applications simply output the data in chunks and never buffer any data.

Happy Learning !!

What is React JS ?

Lukman Hossain — Thu, 30 Dec 2021 14:57:00 +0000

ReactJS:

ReactJS is a JavaScript library. It’s used for developing complex and interactive web and mobile UI, especially for a Single Page Application(SPA). ReactJS helps to build reusable UI components because it follows the component based approach.

React Higher-Order components and example:

Higher-order component is an advanced way of reusing the component logic.
Examples:

Render high jacking.
Props manipulation.
State abstraction and manipulation.
Code reuse, logic, and bootstrap abstraction.

Difference between Virtual Dom and Real Dom:

Virtual Dom:

Fast update but can’t directly update HTML.
DOM manipulation is very easy.
No memory wastage.
Update JSX, If element update.

Real Dom:

Slow update but directly update HTML.
DOM manipulation is very expensive.
Too much memory wastage.
Create a new Dom if element update.

UseState in React:

UseState is a built-in hook that allows adding state to functional components in react package. We use it inside a function component. We use it to create a piece of state without switching to class components.

Reduce in React:

Reduce is a function that specifies how applications state changes in response to an action. It works by taking previous states and actions then returning new values.

Difference between JSX and JS:

JSX

JSX is JavaScript XML. Which is a combination of HTML and JavaScript.
Use to write react component.
Making the code easier to read and understandable for the user.

JS

JS is a scripting language of ECMAScript.
Use to make the webpage more interactive.
Basically, it adds life and creativity to a website, making it more engaging.

ReactJS Optimization:

By using the below roles we optimize a react application-

Dependency optimization.
Using immutable Data structures.
Avoiding props in initial states.
Memorize React components.
CSS animation Instead of JS animation.

Happy Learning !!