Kalpesh Singh

life, philosophy and little tech

Read this first

Learning Unit testing - Jest and React Testing Library

Read about how to begin unit testing in your project, what are the challenges you might face, and my short story around learning unit testing.

Table of Content

  • Jest, React Testing library and Enzyme
  • Unit testing in Create React App (CRA)
  • Mocking - When to use what?
  • Async function testing
  • Route testing
  • Assertions, global methods, and cleanup
  • Formik testing
  • What you should avoid with React Testing Library
  • Testing hygiene
  • Visual satisfaction
  • Resources

A poster mentioning stats for test cases and efforts invested. The main point of poster is to learn by public contribution(Click on poster to zoom)

It was long due that I paid. I wanted to learn unit testing but never moved towards it. Finally, I decided and the day came when I started learning from the TestingJavaScript course by KCD. I was blown away 🤯 when he showed a simple assertion without any library.

// Function - Often referred as test subject
const sum = (a, b) => a - b;

// Function to make assertion
function expect(actual) {
  return {
...

Continue reading →


Building a React component using 7 guiding principles

Learn about how to build a reusable, extensible, developer-friendly component with 7 simple design principles.

Table of Content

  • Getting started
  • Principle 1 - Zero prop rendering
  • Principle 2 - Logical grouping
  • Principle 3 - Type checking
  • Principle 4 - Enums
  • Principle 5 - Naming conventions
  • Principle 6 - Explicit prop declaration
  • Principle 7 - Custom debug messages

Ever needed to duplicate components because the one is too tightly coupled or performing multiple responsibilities or can’t be re-used because of one of the hundred bad reasons? We stuck with such past decisions in life when we don’t have guiding principles.

I have written dozens of React components and made tons of mistakes. As I progressed I identified common patterns, understood about APIs, extensibility, design principles, etc. In this article, I will document my learnings of building the React components.

We will...

Continue reading →


Short and shallow thoughts on library versioning

Do you know that software versioning even follows superstitions, has political and cultural impact?

Table of Content

  • What is versioning?
  • Types
  • How do you semantic version?
  • When should we bump the version?
  • Git tags
  • Cultural, Superstitions and Marketing Gimmicks
  • Further learnings
  • Resources

What is versioning?

The versioning is a practice in software development where we assign unique numbers or names to a particular state of software application. Example - macOS Mojave, Windows 10 or Lodash 4.17.15

Types

There are different types of release schemes. It can range from a sequence-based (SemVer), date based released (Ubuntu 18.04, for example, was released in April 2018), codename based (Windows Vista), etc.

How do you semantic version?

Version = Major.Minor.Patch (Example- PluralJS 1.1.0)

The semantic versioning follows an incremental number (positive integer) approach where you...

Continue reading →


The journey of building a tiny JS library

Excited about what does it take to conceptualize, and publish a library? Learn about project setup, test cases, different JS Modules, Tree shaking, and more in this article.

Table of Content

  • GitHub repository
  • Folder structure
  • Installing dependencies
  • Dismantling package.json
  • Types of JS Module
  • Rollup configuration
  • Other configurations
  • The human side
  • Tree Shaking
  • The healthy library
  • Pre-publishing hygiene
  • Release

I was curious to learn about the Rollup bundler and building a library using it. I thought I would build a pluralization library that pluralizes any given word.

The idea came when I stumbled upon Grammarly’s article on plural rules. I thought it should be pretty straightforward and started my journey of learning and building PluralJS.

I already read Kamlesh Chandani’s article on building a library and I was pretty energetic to build one. I decided to explore his demo...

Continue reading →


Understanding JavaScript Closure

Hello Amazon App

Learn about Closure, JavaScript execution context, the power of Closure using two practical examples.

Table of Content

  • How to read this article
  • How I learned Closure
  • Understanding JS execution context
  • How powerful is Closure?
  • Building jQuery one() function
  • Building simple generator function

How to read this article

This article refers to and explains the code snippets and diagrams. The effective way to understand content would be to look at the related code snippets and diagrams along with reading. I would suggest to duplicate the tab and keep the related code snippet and diagrams in a new tab and refer as required.

How I learned Closure

It all started when my former colleague and I discussed this JS concept a few years back. Besides, I came to know it is one of the popular interview questions.

I read about Closure a couple of times. Most of the time, the...

Continue reading →