Understanding first unit test case in a React component

We are going to look into the files and see the existing test case. Then we are going to write our own test case.

react-js-testing unit-testing
Setting up Jest environment for unit testing

In this tutorial, we are going to learn how to install and configure jest in a project. If you are using create react app, then jest comes preinstalled in the project and you can skip this tutorial.

jest setup
Introduction to unit testing

We are going to understand what is unit testing. We will looking into the significance of test runner, test utility, assertion library, coverage reporter and mocking. We will finally look into why understanding Jest is important in writing unit test cases in React.

jest unit-testing
Testing components which use withRouter HOC React

We will learn how to test the component using the MemoryRouter, passing custom pathname to the MemoryRouter and wrapping the component with Router to access change in pathname.

custom-pathname memoryRouter testing withRouter
Passing component as props aka render props in React

React is a declarative and component based language. The components communicate between each other using props. Props can be string, numeric, boolean, function and react class component as well. Yes, we can pass component itself as a prop to another component. There are two way to pass a component to another component. Render Props In […]

render-props
How to mock the axios library in jest without mock adapter or library

We are going to mock the axios library by using the jest.mock function and providing a sample mock factory implementation.

axios mock
Unit testing the Axios call using enzyme in a react component

We are going to mock the axios library to test the success and error condition of the api in our react class using the enzyme library.

axios enzyme mock
Unit testing a react component using Axios without any mock adapter library

We are going to mock the axios library without using any mock adapter. We will test the resolved value (success) and the rejected value(error) conditions of the axios call.

axios mock unit-testing
How to use lighthouse in continuous integration system (example travis ci)

Learn how to use lighthouse in continuous integration system. We will see an example with travis ci.

continuous integration
What is Puppeteer and how is it useful

Puppeteer is a library which allows you to remotely control the chrome browser. It means that puppeteer can do things with browser, that you do. Can you type a webpage address in address bar of chrome and open it? Puppeteer can do it to. See the script below. Save this file as index.js Run the […]

continuous integration
How to access React instance inside the event handler

Use bind functions or arrow functions to access react instance inside the event handler

arrow function bind
Why React Hooks

Learn why react hooks are useful and what are the advantages of using React Hooks.

hooks
React Hooks Tutorial for Beginners: Getting Started With React Hooks

Learn about the hooks in React in step by step way and know about the useState hook.

hooks
Testing async http code (axios or fetch) using enzyme vs react testing library

Learn the difference in testing async code between enzyme and react testing library.

react-js-testing
Complete guide for unit testing in React using enzyme and react testing library

The idea of this tutorial is to explain the comparison between the testing using the react testing library, enzyme and react test utils library This tutorial will also help you understand how the unit testing and its concept work in different libraries, and you will be able to appreciate the pros and cons of them.

enzyme react testing library
Testing events in React using enzyme vs react-testing-library

Learn how the way we write unit test case differs from enzyme to react testing library.

enzyme react testing library react-js-testing
How to write the unit test cases for events in react using jest and enzyme

Learn how to use simulate function from enzyme to test the various events and also test out the data to the event.

enzyme react testing library
What are render phase and commit phase in react dom?

Learn about render phase and commit phase methods to react. Also, learn when to use side-effects to React.

commit react-dom render
Why use purecomponent when React DOM renders only on difference?

Purecomponent is similar to React.Component, the only difference is that React.PureComponent implements a method called shouldComponentUpdate with shallow prop and state comparison. React documentation recommends using PureComponent as performance optimization because PureComponent prevents unnecessary renders. But according to the main concept of React, it updates only what’s necessary. Here is the gif from the documentation […]

purecomponent react-dom virtual DOM
Why do we have to call super(props) in constructor react?

super(props) is required to be called in constructor to access this.props. If it is not called in constructor, then this.props will be undefined in constructor.

props
How to test routes (react router dom) in react using jest and memory router – 2

Learn how to test the routes in react. In part 2 of the post, we will look into testing the routes using the MemoryRouter object.

jest memory router routes
How to test routes (react router dom) in react using jest – 1

Learn how to test the routes in React. In part 1 of the post, we will look into testing the routes using an object of pathname and component name.

jest memory router routes
How to unit test state of the component using jest and enzyme

Learn how to unit test the state of the component and spying on the instance method and accessing UI components inside the component.

enzyme jest
How to write unit test cases for asynchronous code Axios or fetch library in React using jest and enzyme

Learn how to write unit test cases for Axios and Fetch library and mock the api calls to test in development mode.

axios enzyme fetch jest
How to unit test the timer functions – setTimeout and setInterval in React using jest

Learn how to write unit test cases for timer functions like settimeout and setinterval in React using jest and enzyme library.

enzyme jest setinterval settimeout timer
Setting up the environment for writing unit test cases in React using jest

Learn to set up the environment to write unit test cases in React using jest using create-react-app CRA and without custom repository

environment jest
Learn unit testing in React using Jest

Learn to write unit test cases for routes, async functions, timer functions, states, redux, lifecycle methods, charts in React. We will look into setting up the environment and conclude with different types of testing tools available in React.

jest react
Learn unit testing in React using react testing library

There are many libraries available for React.JS testing. You would have probably heard about Jest, Enzyme, React Test Utils, React Testing Library, Dom Testing Library and many more. There are other libraries that help you assert in the unit testing library like chai, expect, sinon. In this tutorial, we are going to look into testing […]

react testing library
Adding buttons below recyclerview android

Learn how to add button at bottom in recylerview in android

android
What is purecomponent in react

Purecomponent, as the name suggests, is a component which has same output for a given prop and state.  When our React component are pure(as stated above), we can use PureComponent to have the performance gain. TL;DR PureComponent has shouldComponentUpdate function overriden. This function does shallow comparison of the props and state. Due to this unnecessary […]

purecomponent
Difference between brittle and non-brittle tests in React JS

We are going to write two tests – one of the test will be brittle (it will test the implementation) and other test will be non-brittle (it will test the functionality). App.js Here the functionality of component is that when the user clicks on button, the number is updated on screen. The implementation is done […]

brittle non-brittle tests
How to use error boundary in react?

Error boundary catch errors in components below their component tree in declarative fashion. You can also use try/catch to catch and handle the errors in React, but that is applicable only for imperative code. But error boundary allow you to wrap the components so that error is contained inside them, and do not break the […]

error error boundary error handling react
Why snapshot testing in react is not as useful always

Introduction Snapshot testing, as the name refers, is taking the snapshot of the component and then testing if it has changed from previous one. The previous snapshot of the component is source of truth. So any deviation from the previous snapshot will result in test failing. This type of testing allows you to test the […]

snapshot test
How to use error boundary in react?

Error boundary catch errors in components below their component tree in a declarative fashion. You can also use try/catch to catch and handle the errors in React, but that is applicable only for imperative code. But error boundary allows you to wrap the components so that error is contained inside them, and do not break […]

error error boundary error handling react
How to get started with Gatsby themes

Gatsby is a static site generator in React. It uses React components, then serves static using GrapQL. Themes were recently introduced in Gatsby. Let us understand themes in Gatsby. Why are Gatsby themes useful? When you build your site in Gatsby, the content of the site and the layout/theme of the site are all in […]

gatsby gatsby themes
How to test the snapshot of UI with changing ids like chart or primary keys

Snapshot testing works by serializing the webpage and comparing it with the latest value. But when it comes to dynamically generated values, it will fail. Like if you have a list that contains the primary key as shown below. When you store the snapshot for the first time, the keys will be 234, 456,789. When […]

chart snapshot testing time
Weird (but useful) questions about React you always had in mind but never asked

If you are a React developer, then you would be able to relate to this tutorial. In this tutorial, we are going to answer questions that you always had in back of the mind when developing React applications, but you always postponed answering them.

react
Difference between enzyme and react-testing-library

Difference between react-testing-library and enzyme on setup, concept, forceUpdate or shallow/deep rendering of the component

enzyme react testing library