We are going to look into the files and see the existing test case. Then we are going to write our own test case.
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.
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.
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.
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 […]
We are going to mock the axios library by using the jest.mock function and providing a sample mock factory implementation.
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.
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.
Learn how to use lighthouse in continuous integration system. We will see an example with travis ci.
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 […]
Use bind functions or arrow functions to access react instance inside the event handler
Learn why react hooks are useful and what are the advantages of using React Hooks.
Learn about the hooks in React in step by step way and know about the useState hook.
Learn the difference in testing async code between 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.
Learn how the way we write unit test case differs from enzyme to react testing library.
Learn how to use simulate function from enzyme to test the various events and also test out the data to the event.
Learn about render phase and commit phase methods to react. Also, learn when to use side-effects to React.
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 […]
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.
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.
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.
Learn how to unit test the state of the component and spying on the instance method and accessing UI components inside the component.
Learn how to write unit test cases for Axios and Fetch library and mock the api calls to test in development mode.
Learn how to write unit test cases for timer functions like settimeout and setinterval in React using jest and enzyme library.
Learn to set up the environment to write unit test cases in React using jest using create-react-app CRA and without custom repository
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.
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 […]
Learn how to add button at bottom in recylerview in android
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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.
Difference between react-testing-library and enzyme on setup, concept, forceUpdate or shallow/deep rendering of the component