Forem: Ashutosh

Unit Testing of React Components with Testing Library

Ashutosh — Fri, 11 Mar 2022 04:16:29 +0000

React Testing Library is an alternative to Enzyme. This puts developer in the shoes of end user of react application.

Jest Vs React Testing Library

Jest is the test runner and gives the ability to run the test from the command line. When we write npm test or npm run test it is jest responsibility to collect all the files ending with .test.js, run each test cases and show pass, fail results. React testing Library provides us with the functions to work with the DOM elements like render, fireEvent, waitFor, screen. Jest provides us functions for test suites, test cases, and assertions in the form of describe-block, test-block. A test suite can have multiple test cases and a test case doesn't have to be in a test suite.

import sum from './math.js';

describe('sum', () => {
  test('sums up two values', () => {
    expect(sum(2, 4)).toBe(6);
  });
});

Render a component

Here we discuss the way to render react components.

import React from 'react';

const title = 'Hello React';

function App() {
  return <div>{title}</div>;
}

export default App;

Selecting Components

React Testing Library offers us tools to search functions to grab elements. These elements are then used for assertions or user interactions.

import React from 'react';
import { render, screen } from '@testing-library/react';

import App from './App';

describe('App', () => {
  test('renders App component', () => {
    render(<App />);

    // implicit assertion
    // because getByText would throw error
    // if element wouldn't be there
    screen.getByText('Search:');

    // explicit assertion
    // recommended
    expect(screen.getByText('Search:')).toBeInTheDocument();
  });
});

Use debug function to check what is rendered on the screen if not sure.

import React from 'react';
import { render, screen } from '@testing-library/react';

import App from './App';

describe('App', () => {
  test('renders App component', () => {
    render(<App />);

    // fails
    expect(screen.getByText('Search')).toBeInTheDocument();

    // succeeds
    expect(screen.getByText('Search:')).toBeInTheDocument();

    // succeeds
    expect(screen.getByText(/Search/)).toBeInTheDocument();
  });
});

Search Types

getByText - As seen in the above example, it is used to select an element by text.
getByLabelText: <label for="search" />
getByPlaceholderText: <input placeholder="Search" />
getByAltText: <img alt="profile" />
getByDisplayValue: <input value="JavaScript" />

We also have two more search variants queryBy and findBy. The main difference between all is getBy returns an element or an error. If it doesn't find it throws error. In order to assert elements which aren't there we can exchange getBy with queryBy. The findBy is used for asynchronous elements. After initial render the component change the screen with response from API. If we want to test the component over the stretch of its first render to its second render due to the resolved promise, we have to write an async test, for this purpose we use findBy

import React from 'react';
import { render, screen } from '@testing-library/react';

import App from './App';

describe('App', () => {
  test('renders App component', async () => {
    render(<App />);

    expect(screen.queryByText(/Signed in as/)).toBeNull();

    expect(await screen.findByText(/Signed in as/)).toBeInTheDocument();
  });
});

We can always use screen.debug(); to verify our results. If you assert for a missing element, use queryBy. Otherwise default to getBy.

To assert multiple elements all search variants can be extended with the All word getAllBy, queryAllBy, findAllBy. Assertive functions happen on the right hand-side of your assertion. In the previous tests, you have used two assertive functions: toBeNull and toBeInTheDocument. Usually all these assertive functions origin from Jest. However, React Testing Library extends this API with its own assertive functions like toBeInTheDocument.

User Interaction: Fire Events

Till now we have rendered components, selected elements to simulate interactions of end user fireEvent function is used.

    fireEvent.change(screen.getByRole('textbox'), {
      target: { value: 'JavaScript' },
    });

The fireEvent takes an element(here textbox) where change needs to be made and the event(here JavaScript).

React Testing Library comes with an extended user event library which builds up on top of the fireEvent API. fireEvent.change() triggers only a change event whereas userEvent.type triggers a change event, but also keyDown, keyPress, and keyUp events. Whenever possible, use userEvent over fireEvent when using React Testing Library.

await userEvent.type(screen.getByRole('textbox'), 'JavaScript');

Change Handlers

Sometimes we donot have state or side-effects, but inputs as props and output as JSX and callbacks. Lets consider the below example.

function Search({ value, onChange, children }) {
  return (
    <div>
      <label htmlFor="search">{children}</label>
      <input
        id="search"
        type="text"
        value={value}
        onChange={onChange}
      />
    </div>
  );
}

We use a utility from Jest to mock the onChange function which is passed to the component.

describe('Search', () => {
  test('calls the onChange callback handler', () => {
    const onChange = jest.fn();

    render(
      <Search value="" onChange={onChange}>
        Search:
      </Search>
    );

    fireEvent.change(screen.getByRole('textbox'), {
      target: { value: 'JavaScript' },
    });

    expect(onChange).toHaveBeenCalledTimes(1);
  });
});

References

My 1 year and 4 months of becoming a better coder (Part 1)

Ashutosh — Sun, 08 Nov 2020 19:58:59 +0000

This started with the idea of me switching my company. I spent two years in a company then, I wanted to switch for better opportunities. I asked myself some basic questions like what is my current tech stack and how do I see myself in the next 10 years. It was a time of realization as life was like an accident I had no plans of how I was leading my life.

I got to understand one thing although I have experience in various fields I have no expertise in a specific field. I took this as a challenge and worked on my JavaScript skills to be better at coding the web. I started learning by following tutorials, code along but was not able to make any significant progress.

I watched some youtube channels and read blogs. I got to know that to be good at coding I need to be consistent, like saying code daily or at least 5 days a week. I tried this but failed. I came across 100DaysOfCode. I decided to code for 1 hour daily. To my surprise, I was not able to sit for more than 10 minutes. My mind was moving everywhere. I tried this for some time and failed as I couldn't continue.

I was new to failure then, before that, I was treating it casually and gave up my idea for some time. This was also alarming as I was working for my paycheck and not improving on myself to get a better raise. After further research, I found some great tools to track my progress like the tomato-timer or the Pomodoro technique and updating 100 Days progress in the Twitter community with #100DaysOfCode.

I tried with this, it worked for I guess 30 days after which I gave up again. This was the time when I was constantly picking up and giving up on my skills. My friends were getting better job opportunities that created motivation around me. I also coded with more effort as I wanted to get this job. I did it. Then I got into a hibernation state as I achieved my goal.

Cutting two months of "code if I wish", I got into my new job. I also moved to a new place. In my new office, I found the standards of output expected are very high. I suddenly realized that I was not as per the quality. I started my coding journey again but it was very hard to focus on the subject. I really had a bad experience in my first project in which I was depressed as I was not able to pick things up. Instead of persistently working on it, my mind turned to fear that literally paralyzed me and I was literally ruining everything. But this time things started to move due to my consistent efforts over time.

They released me from the project, it was eye-opening for me, I made a plan and started practicing again so I can be prepared before entering the new project. It worked for me in the new project as also I improved and there was less work compared to the last so I was able to deliver things on time. This made me confident. Meanwhile, I started the 100DaysOfCode again with yoga, meditation, reading tech articles, writing blogs, understanding businesses, and exercise. This time I got hooked.

This was my 10 months journey. I will cover my further story of ups and downs and my learnings and where exactly am I standing right now in the next part of this article.

Intro To React (P2) ES6 features

Ashutosh — Sun, 13 Sep 2020 19:00:59 +0000

Variables

var was used to declare variables in JavaScript.
To avoid errors and solving scoping issues we now use
let and const where let is a var like declaration and using const we make the variable immutable.

We need to use let and const as per our requirements.

Arrow function

Regular function in JavaScript

function myFunc () {
   ...
   --function_body--
   ...
}

ES6 function in JavaScript

const myFunc = () => {
   ...
   --function_body--
   ...
}

parenthesis can be removed if 1 parameter is passed and the return statement can be omitted if it is a one-liner

const myFunc = num => num * 5;

myFunc(5);

Export and Import

We use export default person to export a default parameter or function. Or we may export multiple functions from a single file
export const hello.

To import we follow the below syntax

To import default functions
import person from './person.js';
import prs from './person.js';

To import particular function from many export
import {hello} from './hello.js';
import {hello as Hi} from './hello.js';
import * as bundled from './hello.js';

Class

class Person{
   name = "Raja";                //Property are variable

   const call = () => { body  }  //Methods are functions
}
Usage:
const myPerson = new Person;
myPerson.call();

class Person {
   constructor () {
      this.name = "Sonu";
   }
   function printMyName () { 
       console.log(this.name);
   }
}

Spread and Rest Operator

This is three dots ...

The spread operator is used to split up array or object elements

oldArr = [a, b, c]
const arr = [...oldArr, 1, 2];    // [a, b, c, 1, 2]

const oldObj = { name : 'Ashu'};
const obj = {
   ...oldObj,
   age : 25
}

The rest operator is used to merge a list of arguments into an array

function sortArray (...args) {
   return args.filter( item => item === 10);
}

sortArray(1,5,8,10);

Destructuring

To pick up particular items in an array and store them as variables

const numbers = [1, 2, 3];
[num1, , num2] = numbers;

console.log (num1, num2);   // 1, 3

Learning Vs Working

Ashutosh — Mon, 07 Sep 2020 17:05:31 +0000

Learning is a process of acquiring new skills in your portfolio. To learn anything one needs to devote dedicated time to understand the hooks of the skill. This is a passive style of learning where one understands how to pull out any task.

Working is when we apply that learning to pull out that creates value for the other. Generally, people live with this mindset that they are learning to get a job so that they can have a decent amount of money to run their families.

These people do not like getting up. Show up in the job and they live for the weekends. This is a choice but people who practice this becomes miserable as they have to spend a huge amount of time in their workplace where they hate to be at. When the experience of life is miserable it reduces our productivity and living itself is a challenge.

If you have chosen a life of coding, you must be prepared with the set of expectations that comes along with that. Those who do not understand the expectations are living in their imaginary world and when their imaginary expectations are not fulfilled they start blaming the circumstances. You can be that guy but do you want to be that guy?

There is another way of life where you can love what you do. No, I am not talking about finding purpose or your passion. I have a simple workable plan for you. Try to give at least 1 hour to your learning every day. While you learn, apply that learning to create something, this is your practice. By practicing it every day will not only make it a habit but life works in compound interest. In the beginning, it may appear you are not growing but with consistent and persistent efforts you will not just good in your job but will add huge value. Things that may appear impossible to many will look like a child play to you.

map - Array Function

Ashutosh — Sun, 30 Aug 2020 18:02:48 +0000

The map function creates a new array populated with the results of the calling function.

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

Syntax :

let new_array = arr.map(function callback( currentValue[, index[, array]]) {
    // return element for new_array
}[, thisArg])

callback  - a required function which takes in currentValue, index, the array as parameters
currentValue  -  required parameter. This is the current value of the item in the array
index  -  optional parameter. This is the index of the item that is selected
array  -  optional parameter. This is the array on which map function gets executed.

the map function is called for each item in the array, such that the result is returned as a new processed item as per requirement.

Mapping an array of numbers to an array of square roots

let numbers = [1, 4, 9]
let sum = numbers.map(function(num) {
    let add = 5;
    add += num
    return add;
})
// sum is now     [6, 9, 14]
// numbers is still [1, 4, 9]

Using map function to reformat objects in an array

let kvArray = [{key: 1, value: 10}, 
               {key: 2, value: 20}, 
               {key: 3, value: 30}]

let reformattedArray = kvArray.map(obj => {
   let rObj = {}
   rObj[obj.key] = obj.value
   return rObj
})
// reformattedArray is now [{1: 10}, {2: 20}, {3: 30}], 

// kvArray is still: 
// [{key: 1, value: 10}, 
//  {key: 2, value: 20}, 
//  {key: 3, value: 30}]

Mapped array contains undefined

let arr = ["We", "Are", "Bros", 4]
let filteredArr = numbers.map(function(item, index) {
  if (index < 3) {
     return item
  }
})
// index goes from 0, so the filterNumbers are 1,2,3 and undefined.
// filteredArr is ["We", "Are", "Bros", undefined]
// numbers is still ["We", "Are", "Bros", 4]

forEach - Array functions

Ashutosh — Sun, 23 Aug 2020 12:58:36 +0000

Looping is an essential part of project development. We have the basic for loop to iterate through the code to execute a certain set of codes. forEach and map functions help in iterating through a function for each element present in the array.

forEach

Syntax : 

array.forEach(callback(item, index, array), thisVar)

array - contains the list of elements for which we want to run the callback function
item - (*optional*) Each item is passed to the function as an argument.
index - (*optional*) Contains the index of the element that is passed as an argument.
thisVar - (*optional*) Used to set the context for the given function, upper scope. It is not needed if we use the arrow functions

Note - The return value is "undefined"

There is no way to stop or break a forEach() function. If we want such behavior this can be achieved using simple for loop, for...in, for...of, or other array functions like every(), some(), find(), findIndex().

Also, we need to take care forEach doesn't account for asynchronous functions and thus it is better to avoid it during API calls.

No operation for uninitialized values

const array = ["Hello","World",,"skipped uninitialized value"]
let numCallbackRuns = 0

arraySparse.forEach((element) => {
  console.log(element)
  numCallbackRuns++
})

console.log("numCallbackRuns: ", numCallbackRuns)

// Hello
// World
// skipped uninitialized value
// numCallbackRuns: 3
// the missing value between "World" and "skipped uninitialized value" didn't invoke the callback function. Even if it would have been a "", it would have a count

Converting for loop to forEach

const shop = ['banana', 'rice', 'pulses']
const copyItems = []

// before
for (let i = 0; i < shop.length; i++) {
  copyItems.push(shop[i])
}

// after
shop.forEach(function(item){
  copyItems.push(item)
})

Coding Daily to learn Problem-Solving rather than Coding

Ashutosh — Sun, 16 Aug 2020 18:00:07 +0000

Coding for me is a commitment that I want to do every day. Doing something every day comes with an attitude that I want to grow as an individual, I want to increase my knowledge.

As I am working in a job, working in an agile framework I have observed in almost 3 months my project is getting changed. This means the company is not looking for an employee who knows a particular technology but someone who can solve their problems. Technology is just a medium to solve the potential problem. Like we have tools like saw that is used to cut through the materials. Technology like ReactJS, Angular, NodeJS, etc are tools to solve various needs technically on a scalable model.

The reason why IT companies make billions with the same amount of work that is put by other professions is that in the IT the solution to a model that is built is reusable, meaning the same product can be used to cater various user needs, and it is scalable meaning the solution can solve problems for large masses of people in millions and billions.

When such a huge amount of people gets fulfilled with little inputs in the form of capital, project teams this results in huge cash flow, and with huge profits, the chances are the price of subscription or product decreases many folds compared to a solution provided by non-IT fields.

Now the question is, is this field easy? To know if something is easy or hard is an individual choice. If someone works regularly on something, do regular practice then things will eventually become easy, else it will be hard.

I have seen people with non-IT, non-technical, non-CS degree background switched to developer jobs by consistent perseverance. If you are someone who wants to walk a similar path, I recommend you to make a proper plan, you can follow the dev.to, YouTube, Twitter. There is a lot of content, learn from the people who are already doing it. Start practicing on it daily, you will eventually land up to your dream job.

I hope you liked the article. Give a 💖 and 🦄. Also, let me know your plans or any feedback in the comment box.

Introduction To React (Part 1 of React)

Ashutosh — Sun, 09 Aug 2020 10:05:54 +0000

React is an Open-Source library for building user interfaces. It is a library that focuses on UI and has a rich ecosystem that helps us deal with other aspects of building applications.

React is one of the most popular JavaScript libraries which is backed by the giant Facebook. This makes sure React is never out of business. Also, due to its popularity, there is a huge developer base which makes it easy for a newbie to get tutorials, solutions to the problems encountered.

This is based on Component-based architecture that means, the whole webpage is realized as a set of components. React promotes code reusability which means the same component can be used to render different contents that have a similar layout.

React is declarative which means tell react what you want and react builds the UI. This helps a developer for smoother DOM manipulations.

To learn React you need to have a basic understanding of HTML, CSS, and JavaScript. I will be discussing my learning and going to cover the fundamentals of React, Routing, HTTP, Redux.

Follow me to get more learnings to React.

In case, you want to add something or give me feedback please use the comment section. Don't forget to give me a 🦄 and 💖.

Thanks for visiting. 😊😊

Aligning Technology to Cater Business Needs

Ashutosh — Sat, 08 Aug 2020 14:31:59 +0000

Learning technology like React is itself a big job. After you have worked with some of the basics of HTML, CSS, and JavaScript, you take up this framework and start creating a project. With some interview experience, you also get into a good company. Then, the real problem begins.

Working on a self-made project to deliver a small solution helps us grab the required skills, but when we get into a company, generally the product is developed and we are expected to make minor changes to the product, add new features, solve defects raised by the customer. 😃😃

In the above scenario, where a mountain of code is pushed onto you and you are expected to provide output, chances are you can become a bit scared. This article helps you to provide practical solutions to deal with such situations easily. 😎

Whenever a task is assigned to you in a technical company there is always a deadline associated with it. by focusing on the deadline, try to reverse engineer how you can arrive at the solution and try to find the shortest way to do so. Generally, when assigned to a new project the first task is given such that you are always coding with someone. This is done to promote pair programming that helps in easy grasp of concept by the new joiner. 👫💻

Even if you are expected to work alone, there is going to be a KT, Knowledge Transfer sessions. In the KT sessions, they will give you a brief introduction to how the system or the application works. Anyone needs to be attentive in such sessions, as these are going to put the foundation for the work that you are going to deliver. I also suggest recording these sessions for future reference. ⏺

Once you are equipped with the knowledge about the product and the feature that you will be working on, stick to the feature that you need to implement. Then understand the code for the particular part where the change needs to be done. Start debugging the part for better understanding, use console.log(), and use the debugger to understand the flow. 👨‍💻

When you understand the customer's requirements and the code's functionality. You can now use your coding skills to convert business logic into code and implement it in the right place. 🌞🌻

Thanks for reading the post. In case you want to add something, give feedback, praise you are always welcome in the comment section. 😊

Introduction to Express (Part 1)

Ashutosh — Sun, 02 Aug 2020 18:00:22 +0000

Express is a node framework for creating the backend of the application. A framework is a set of rules that are pre-defined for the smooth development of the application. This helps in making big and stable projects. A framework is different than a library. A library is used for solving small problems. It has a limited number of functionalities. The framework provides a whole set-up for application development. We just need to include our custom requirements.

JavaScript was earlier used as the client-side language for browser interactivity. With the introduction of Node, JavaScript was able to get executed at the CLI and started used for backend development purposes.

There are many frameworks for backend development available on NPM, express is very popular. Being popular and a huge developer community supporting it, it makes things easy for someone who is just starting up, as there are many tutorials available, with community support we will be able to find solutions to our coding problems.

A website generally contains a lot of dynamic pages. To navigate to these dynamic pages a concept routing is used in the express. Let us try to understand routing in express by the help of an example.

//First we install the express framework inside our project folder
C:\Users\user_name\project\FirstExpressProj> npm install express --save

//Then we include express.js in our main file that is generally app.js or index.js

var express = require("express");

var app = express();

//We use the get method to access the required website like  -->> https://localhost:3000
app.get("/", function(req, res){
    res.send("Hi There");
});

// To access the route https://localhost:3000/dog
app.get("/dog",function(req, res){
    res.send("Hi Dogu, How are you doing");
})

// The listen method defines the port on which the server runs, here 3000
app.listen(3000, function(){
    console.log("Server has started!!!");
});

In the above article, we studied the introduction to express. Also, we saw how to install express, include express in our project, and some basic routing with the help of an example. In the next article, we will see, how to include a file, send HTML structure, and some other advanced topics.

Why learn Node.js and where NPM lies in all this

Ashutosh — Sat, 01 Aug 2020 12:42:27 +0000

Node

Node.js, as the official site says is a JavaScript runtime built on Chrome's V8 JavaScript Engine. That means JavaScript as a language is not just limited to frontend web development but you can stretch it to write code on the server-side. 😃😄

To be a web developer 💻, it is a recommended path to learn HTML, CSS, and JavaScript. As soon as one learns the frontend web by making a project on a framework like React or Angular, to make a full project one used to learn backend technologies like Java, Python, or Ruby. That means learning another language for the other half which can be troublesome being a newbie. Node gives frontend developers to see the other side, the backend development and you don't have to learn new language and rules in the process. 👨‍💻👩‍💻

If you are not a web developer 🤦‍♂️🤦‍♀️ also and getting your hands dirty for learning frontend skills, you are anyway learning JavaScript. Node.js is a popular runtime for JavaScript lets you widen your backend and JavaScript knowledge. 😝😜

But it doesn't matter in the long run if you started with Node, Python, or Java. What matters is the principles and the rules that need to be taken care of. The technology aims to solve real-life problems and every technology has its advantages and disadvantages based on the business problem that is solving. 🏡

Let's discuss how we can use Node on the terminal.

We can directly interact with the node console. First, install Node. Then type, "node" and enter. It will let you execute javascript.

C:\Users\user_name>node
Welcome to Node.js v14.6.0.
Type ".help" for more information.
> 2+3
5
> "hello "+ "world"
'hello world'
>

Or, run a file having JavaScript's line of code. this is an effective way of executing JavaScript as all the code can be written in a file and can be executed by passing "node ".

C:\Users\user_name>node app.js

NPM

According to stackshare.io, NPM is the number 1️⃣ reason why developers like node.js. NPM stands for Node Package Manager, which contains libraries created by other developers on Node and can be used by us. A framework for backend is available Express is an example of how it can be helpful. Like express, mongoose, faker there are more than 350k freely available packages and we can use that for building cool stuff. 😍😍😍

The use of these packages is to eliminate the pains of a developer by using code that has been written by someone else on Node. The command npm install is used to install any package. After installing a package we can include that in our application by using require()

//Add a package to the existing project

C:\Users\user_name\DemoProject>npm install express

//Using express into our code

var express = require("express");  //including express to our app
var app = express();     //assigning it to a variable as express contains lot of functions.

How to learn a skill?

Ashutosh — Sat, 25 Jul 2020 09:49:56 +0000

According to successful people, it takes around 20 hours to learn a new skill and 10000 hours of continuous efforts to be an excellence in a skill. The same goes for coding.

Programming is a skill that helps humans to make working mechanisms out of dumb machines making human lives more efficient and more powerful.

To program a machine we need to talk to the machine and give it instruction in a machine-understandable format, i.e, binary language 0 or 1, true or false, switch on, or switch off. The inefficiency of humans to interact in binary language gave birth to assembly language and high-level language. A programming language is created for solving any number of problems. Similarly, javascript is a language that was created with the intent to make the internet interactive.

Earlier, to learn a skill people used to join classes, go to colleges, or work as an apprentice. This required a lot of effort, time, and money. In the age of the internet, information has lost its value. To master a skill all you need is a device to access the internet, time, and a lot of dedication.

Just by taking a Udemy course worth $10 or $20, you can become a software developer, musician, artist, improve your personality, learn share market which in turn helps you make thousands and millions. If $20 sounds too much just start surfing google with the right keywords and you will land to a site that will give some knowledge, keep on building skills by searching and you can become good at what you are working.

As I said in the beginning, it just takes 20 hours to learn a new skill and 10000 hours to master it. In 20 hours, you can build the basic foundation that is needed for the skill, then you have to make your hands dirty. Practice small exercises, make full projects. In the beginning, it may seem very difficult, just stick on to it, have patience, and practice every day. You can also get associated with communities, like Dev Community is a platform that connects all the developers, these communities help individuals to grow. Also, when you see excellence expressed over the communities, it inspires you to be better skilled and a better human being.