DEV Community: Himanshu Kanojiya

What is the better testing library for React, Enzyme (from Airbnb) VS React testing library (from Kent C. Dodds)?

Himanshu Kanojiya — Mon, 21 Mar 2022 16:04:21 +0000

I wish, if I did not ignore this earlier, if I took it seriously, then I was not confused to suggest which library we should use in the React for the project.

A few weeks ago, I was surfing and posted some posts on Linkedin on which react testing library I should use "React testing library or Enzyme library by Airbnb.

I spent a lot of time researching this. I visited so many blogs, did a post on community, and all.

I have received some replies, but still not convinced at all. Then, I did this: I tried both testing libraries.

Here are some things I have found during research and using both of them that can help you too:

Enzyme:

Focuses on unit testing means it tests components prop & states value, not actual user flow.
As it depends on components prop and state for testing, if you perform any changes in the code, then all test cases for that component will break. Still, If user behavior (user flow) is the same, your test cases will not work.
Can perform isolated testing, depends which rendering method you are using. If using shallow rendering, then will render parent component. If using the mount rendering, then it will load parent to child components to test.
As it tests components props & states, finding the bug in code is easy.
You can access components by using CSS selectors for testing.
Enzyme popularity is decreasing day by day (Not even in top 10). To support this statement here is the survey link: Enzyme Trend.
There is no official adapter (it helps the Enzyme distinguish which React version you are using and which necessary files are required to test files for that react version) for React version 17.
As react version 18 beta announced and there are a lot of changes in React API, I don't think version 18 adapter will be possible as changes in API will require a lot of rework for these: Enzyme Adapters, Enzyme itself, enzyme-adapter-utils, and enzyme-adapter-react-helper.
Enzyme depends a lot on React internals, one change in React internal can break the whole Enzyme library.
If you are not planning to migrate to React version 18, using Enzyme with an unofficial adapter will be enough. In case you are planning to upgrade, then consider React testing library.

React testing library:

Popular and comes with React if you install react with npx create-react-app.
Popularity is increasing day by day. Source: Survey by state of js
Recommend by React team for testing. Source: https://reactjs.org/docs/testing.html
It focuses on user flow-based testing means it performs testing as a real user interacting with your app.
It gives you more confidence in your code as it tests the same as real users interacting with your app.
It depends on the user flow, not on the code, which means if you make any changes in the code, not in user behavior (user flow), then your test cases will not break.
As it tests the same as a user interacting with your app, finding the bug in code can become difficult to find.
By default, it has only one type of rendering for testing, "render" same as mount in Enzyme.
Accessing components is not easy like Enzyme, as it is not using CSS selectors instead, it uses other methods such as findBy, and getBy.
If you need to wait for an element to appear/disappear or a promise has to resolve first, then using findBy methods along with await will help you a lot. Super Easy, right? Yes, it is
Performing user events are almost the same as Enzyme. The only difference is that, in Enzyme, the user needs to pass the event name as a string, and for that, you need to visit the documentation to find an event, but in React testing library, you don't need to. Just access the internal method like this "userEvent.click". It is a Timesaver for me.
If you look in Stack Overflow trends, you will see a lot of progress for the react-testing-library, which means if you are stuck somewhere in testing, then there is a huge community to help you. Source: React testing library & Enzyme Trends

My views:

I am using both libraries, personally like both libraries. There are still many companies out there using Enzyme as they are more interested in traditional testing. So might be there are some chances that you need to use Enzyme over react-testing-libraries, but it is upto us to share pros & cons for it.

In the long run, I recommend you to use react-testing-library as it is growing rapidly, can perform testing the same as a user interacting with your app, not going to be deprecated or outdated, and has community support.

Short Note about Functional Programming in JavaScript

Himanshu Kanojiya — Thu, 05 Aug 2021 10:55:45 +0000

Functional programming is programming paradigms where we take care of multiple things like:

Each operation decomposes into multiple functions. For example, a Function should perform one task.
Function should be pure and will always take input and give an output.
Side effects operation should be encapsulated into another function that is only responsible to handle/perform side effects and should be not mixed with regular operations.
Immutability, where the function should not change the global data or passed references of arrays and objects (non-primitive values). Instead, make a copy of that data and use it. Like map, filter, and forEach higher-order function.
Function composition, where one function output becomes the output of another function.

React JSX in Depth

Himanshu Kanojiya — Sat, 31 Jul 2021 09:57:10 +0000

Prerequisite: Basic knowledge of React

Did you know in React, it is not required to create a component using only JSX? You can use React createElement function as well for building the Components.

Then, why do people use it most in their React App? Let's deep dive, and understand more about it.

What is JSX in React?

return (
    <div>
        <h1>Hey, I am Himanshu</h1>
    </div>

)

const hOneHeading = <h1>Hey, I am Himanshu</h1>

JSX (JavaScript XML) is a syntax extension to JavaScript that gives visual aid to developers by allowing them to write HTML types of codes in JavaScript, and it helps to describe "what the User Interface should look like and how it should be"

After that, React Engine will convert those JSX into React function

React.createElement(component, props, ...children)

In Technical Terms, JSX is syntactic sugar in React that provides React.createElement(component, props, ...children) function after converting from JSX.

So, Instead of writing long and long React.createElement function to create the UI, React team developed JSX to build UI using something that we are used to, which is HTML.

Let's see the breakdown of the JSX converting process to React.createElement function:

JSX Code:

<h1 className:"topBarHeading">I am Himanshu</h1>

compiles to

React.createElement("h1",{className:"topBarHeading",
"I am Himanshu"}

Adding Expressions into JSX as we do in template literals:

Well, in the end, JSX is JavaScript too. So, adding expressions in JSX is easy because it uses almost the same syntax approach as we use in template literals.

Code:

const userName = "Himanshu";
const whoLoggedIn = <h1>{userName}</h1>

Inside the curly braces, you can put almost any valid expressions like variables, inline condition checks, perform functions calls, etc. As we see earlier, after compilation, JSX becomes the regular JavaScript.

Note: Expressions inside curly braces {} always get evaluated. Also, these curly braces give a signal to React that we are using javascript expressions here.

Adding Attributes to JSX elements

In HTML, we can add many attributes to specify more about the tag, like adding a class attribute, id attribute, src attribute, etc.

In React, we can do the same with JSX elements, but the only difference is that JSX is closer to JavaScript than to HTML, so HTML attributes become camelCase.

const element = <div tabIndex = "0"></div>

Note: As the "class" is a reserved keyword in JavaScript, it becomes className, "for" is reserved for loop, it becomes htmlFor, and some other attributes like tabindex become tabIndex.

Adding Children elements as we do in HTML

Well, creating nested tags in HTML, we all mostly do in our projects, and in React, we can do the same thing as we do in HTML, so here is the way to do the same:

function sampleComponent(){
    return (
        <div>
            <h1>Hey, I am himanshu</h1>
            <p>Taskmaster...A JS Master</p>
        </div>
        )
};

Did you know the JSX feature in React prevents XSS (Cross-site-Scripting Attack) injections Attacks?

How? What happens under the hood?
Well, by default, React DOM escapes any value before rendering them on the screen, which means that whatever value (can be malicious code) you give in the input field will be converted to a string by JSX. Also, if you display the input on the screen, then those inputs will be shown as it is on-screen in text format unless you specified those explicitly in the code.

This feature in React makes our React-based app safer from XSS (Cross-Site-Scripting attacks).

Specifying React Element type using Name Casing

Whenever you create a custom component in your project, always start your component name with a capital case. It will help the ReactJS engine in several ways like:

Reason:

Help React Engine to easily distinguish which tag is an HTML tag or custom component. Otherwise, some weird things can happen.
Help you to spot which is the custom component or not.

In short, Built-in HTML tags in JSX represent in lowercase, and user-defined custom components represent in Capital Case casing.

function exampleOfNameCasing(){
return (
    <div>
        <h1>Himanshu kanojiya</h1>
        <CustomComponent>I am JS Task Master</CustomComponent>
    </div>
)
}

Accessing internal components from a module using dot notation:

In many cases in the future, you can have or need to build a single module that exports many React components. Well, wrapping multiple React components in a module is a convenient way to encapsulate all React components, and access them as per need & requirements.

Let's see how we can do this, and access them:

const MyParentComponents = {
    userName:function(name){
        return <h1>User Name: {name}</h1>
}

function myApp(){
    return (
        <MyParentComponents.userName name="Himanshu" />
)
}

Note: If you have a question like, how the object has been written in JSX format or will it be accessible, will it work as component initialization format?

Yes, It will work because the userName function can be accessed using dot notation as we access object property in JavaScript. The other fact is that the userName function is React component, so it is valid to do.

Some don't's while using this:

As it works like JavaScript objects, never use general expressions to access internal components (MyParentComponents[userName], instead, save it to individual variables first, then use it like below:

function doThis(){
    const componentFromModule = MyParentComponents["userName
"]
    return <MyParentComponents.userName name="Himanshu" />
}

So, that's it for JSX, and now let's understand about the props & another several things about JSX:

You can also pass JavaScript expressions as a prop by using curly braces. For an example: , as it is in curly braces, it will be evaluated first, and then it becomes 6
You can not use if-else and loop in expression, as these are not valid expressions, so put in the surrounding code.
You can use the ternary conditional operator in the JSX.
Instead of loops, you can use higher-order functions like map, reduce, filter, etc.
You can use the spread operator to pass an object as a prop. For an example: <Hm numbers = {...numbers}
Booleans, null, and undefined don't render
Props come as JavaScript Objects in the function signature.
Suppose you have to write JSX between the opening and closing tag, then that content between those tags is passed as a special prop which is the props.children, and you can access them in the parent component as well. Example:

Example:

function ParentComp(props){
    return (
        return <h1>{props.children}</h1>
)};

function ChildComp(){
    return (
        <ParentComp>I am Hero</ParentComp>
)}

Writing Clean Code in JavaScript - Variables

Himanshu Kanojiya — Fri, 30 Jul 2021 03:46:07 +0000

Prerequisite: This blog assumes, you have basic knowledge of JavaScript.

This blog covers writing good variables names to maintain code cleanability in JavaScript. What is Variable?, Why writing good names variables crucial for program & Software? How to write a good name for variables?

Did you know writing bad codes leads to a lack of productivity and unnecessary delays, and difficulties to add functionality in the software later.

It might be easy to write quickly messy code but later it will add unnecessary delays and difficulties.

What are Variables?

Variable's are like a container where we store values or program-related data and then access them later to use that data.

Why writing good variable names crucial for program/software?

With a good name, you and other developers can easily distinguish what kind of value it has.
With a good naming, you don't need to read variable full-body or scroll to that position where it has initialized to find what kind of value it has.
With a good naming, you can have an idea about what variable is for what value.
With a good naming, you don't have to write unnecessary comments in the code. For, an example: What value variable has, and it is for what

In the end, good naming will save your lot of time in future.

So, how to write a good name for variables?

Well, it depends on the value you are storing, but here are a few checks which you can use to write a good variables name in JavaScript:

If the value is an object, then use some descriptive name for it. An object can have many data about the users or person or can be a group of data. Example: userInfo, database, authenticatedUserData, etc.
If the value is a number or string, use a descriptive name, like username, age.
If the value is a boolean, use names that answer a true or false to questions. Example: isUserActive, isUserAuthenticated, isLoggedIn.
If your value is constant, then follow the descriptive name pattern and declare it in uppercase.
Don't write too long name where you have to scroll to read

Note: The ability to write clean codes instantly comes with experience and practice. Don't force yourself too hard to do it, try to follow this principle slowly to adapt to these things.

Short checklist to decide when to useReducer & useState hook in the components

Himanshu Kanojiya — Wed, 28 Jul 2021 09:53:54 +0000

useReducer() & useState() hooks, both of them are state management hooks which add interactivity in the app & component.

But sometimes, it can be complicated to distinguish which hook we should use and in which cases we should consider useReducer or useState. So here are some things which you can use to distinguish what to use:

For useState:

Use it when you are dealing with JavaScript primitives as a state.
Use it when you have simple logic to change the state.
Use it when you don't want to separate business logic from the component.
Use it when you have small applications. For example, taking input from the search field and then add it to the current state.
Use it when you have different properties that don't affect each other or don't change each other in a correlated way.
Use it when you have different state properties that can be managed by multiple state hooks easily, like a form submission.

For useReducer:

Use it when you have JavaScript objects & arrays as the state.
Use it when you have complex logic to change the state.
Use it when you have a medium-sized application.
Use it when you have different properties that are tied together then, these should be in one state object like a library management function (adding, issuing & removing book details)
Use it when you have very complex business logic and hard to be done in component alone (help to avoid unnecessary deep nesting in the app component).
Use it when you want to make the state more predictable.

Note (my views):

Reducer function in useReducer is like a functional programming paradigm because of several reasons:

Pure function, takes input and always give an output
Always return new state object, does not mutate the current state object (immutability)
Outputs are predictable
Binary in nature, takes two arguments (current state & action object) and return one state object as output

What is useEffect()?, How does it work? & Why should we use useEffect()?

Himanshu Kanojiya — Tue, 27 Jul 2021 12:25:37 +0000

Prerequisite: Basic knowledge of React Js**

This blog covers about useEffect hook. What is the useEffect hook? How to use (Syntax)? How does it work? When to use it?, and some common use cases of useEffect hook.

What is useEffect()?

Well, useEffect is React hook, which use to handle side effects functions (side Effects are those functions that interact with the outside world, or out of React Js ecosystem), and with useEffect, we can separate them into another Function.

It is like a Functional programming concept, where we try to encapsulate side effects in other functions so that other Functions can stay pure/unaffected.

useEffect hook must declare inside the component (top-level, don't declare them in the block), it will give several advantages (Thanks to closure):

It will have accessibility to those data that are required to use in side effects.
It can also update the data later, based on the dependencies and changes.

Syntax:

useEffect(function sideEffect(){ 
    .....
}, [dependencies_array_element])

About the Syntax:

The first argument in useEffect is to give side effects function.
The second argument is the dependencies array which gives instructions to useEffect hook when to run and when to not. Let's see this more closely:
- If you don't give dependences array, only pass the first argument, then useEffect runs whenever your component renders/re-renders.
- If you give an empty dependences array, then useEffect runs once(when your component renders the first time, after that, it will not run unless you refresh the page).
- If you give something in the dependencies array, then useEffect will run once by default after the component finish rendering. After that, whenever the value of elements in the dependences array change, then useEffect will run again. Example: [isItemHidden].

How does it work?

Well, whenever your components finish rendering, useEffects run unless you specified dependencies in the dependencies array.

Why should we use useEffects()?

Well, there are several cases where you should consider useEffects. Some of them are:

Suppose you are fetching some data online to display movie titles, ratings & you have used handler(Function with the synthetic event) or used inline Functions to get that data. So, what will happen is your component rendering will be stuck when the thread of execution reaches this point until you get the data from outside of the world.
By seeing the first point, we can move those side effects to the useEffect hook so that our components can load/render. After completing the rendering process, React Engine will fire the useEffect hook to run the side effects code and update the component data.
We should useEffect, when your component depends on the outside world data, and we can not guarantee that data will come or not (maybe the server is down there). So, Instead of throwing errors and stop other components from being rendered, move them into useEffect hook.
When you are using browser API (including Timer function, fetch API, local storage and for more browser API, refer to this: MDN Browser API).

Some use cases of React useEffect hook:

Always run whenever component renders/re-renders
Run once after that if component re-renders, then it will not run
Run once by default after that if prop values changes, then run
Run once by default after that if state changes than run