Testing with react-testing-library and Jest

Testing with react-testing-library and Jest

Building bulletproof React apps with automated testing. Errors and bugs are a fact of life. There’s no way to avoid them. The only thing we can do is to minimize the chances of them by.

Errors and bugs are a fact of life. There’s no way to avoid them. The only thing we can do is to minimize the chances of them by:

  1. Identifying errors and weeding them out using automated testings (the subject of this blog post).
  2. Reusing components that have “proven” themselves to be error-free both in real projects, as well as in automated testings. This can be done using Bit’s tool and platform(Github). Bit makes it quick and easy to share, reuse, and manage reusable components. It even runs unit tests before sharing components to Bit’s component hub.
  3. I won't discuss this any further, in this blog post, but you can read more about it here:

How to Publish React Components

How to quickly publish React components from any repository.

blog.bitsrc.io


One aspect of testing is UI testing.

UI testing is a technique used to test the graphical user interface. It involves checking the screens, the different controls, etc., to ensure they work as intended under different conditions.

In this post, we’ll look at two libraries that enable us to carry out UI testing in our React application:

React-Testing-Library

React Testing Library · Testing Library

React Testing Library builds on top of DOM Testing Library by adding APIs for working with React components. npm…

testing-library.com

React-Testing-Library is a DOM-testing library developed by Kent. C Dodds. It is a replacement for Enzyme and provides light utility functions for use with react-dom.

It is targeted more at UI testing of React applications. This means that it does not only test the instances of React components but can also test the behaviors of the elements rendered by the React components. So it is an awesome library for React UI testing.

React Testing Library forces us to follow the principle:

“The more your tests resemble the way your software is used, the more the confidence they can give you.”

Snapshot testing

Snapshot testing is a feature in react-testing-feature in which we can get the snapshot of a React component and test them. This is important because we will add or update the component and might want to compare the changes.

Let’s see how we can perform UI testing on React components using react-testing-library

Selecting and Testing DOM Elements

React-Testing-Library renders React components like a browser and we can select the elements just as we can using the DOM APIs or from the browser Inspector tab.

One way of selecting an element is via the getByText function.

getByText

This function grabs a text from the screen. It returns the text node of the text and with it, we can use it for assertations or for user interaction.

Example:

We have an App component:

import React from 'react';

function App() {
    return (
        <div>
            React Example
        </div>
    );
}
export default App;

Let’s create a test file to assert that the App component renders a “React Example” text on the screen. To do we create an App.test.js file with the code:

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

describe('App', () => {
    test('renders App component', () => {
        render(<App />);
        screen.getByText('React Example');
    });
});

What did we do here? We imported the React module, and also imported the render and screen from ‘@testing-library/react’. These functions are the basic functions for testing React components. render renders the React component in a virtual browser and screen is used to access the rendered DOM.

web-development react front-end-development javascript testing

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Testing Library: The Modern Way to Test React Components

Unit testing, and in our case, testing components, is a key element of any scalable and maintainable project. That truism is even more obvious now in the age of independent and shareable components. When sharing components between projects, testing serves as a way to both validate that a component behaves as expected and that it is independent and reusable (otherwise it would show to be very difficult to test).

Learn React.js: Front-End Web Development for Beginners

Learn React.js - Frontend Web Development for Beginners. In this React tutorial, you will learn the core fundamentals of React JS and Modern JavaScript so that you can start building lightning fast web apps using React JS. Learn Modern JavaScript and React JS from absolute scratch. Learn to make AJAX requests to get data from remote API and display into your web application. Learn React JS, which is one of the most exciting technology of recent time

Tips for Better Front End Testing Quality

Front end testing is an important part of the software development lifecycle. According to research, 80% of the overall performance of a web application is dependent on the client-side code. If we are able to solve most of the problems in the front end, then we can cover most of the problems in a web application overall.

Top 9 Open source JavaScript frameworks for front-end web development

About a decade ago, the JavaScript developer community began to witness fierce battles emerging among JavaScript frameworks. In this article, I will introduce some of the most well-known of these frameworks. And it's important to note that these are all open source JavaScript projects, meaning that you can freely utilize them under an open source license and even contribute to the source code and communities.