Definitions
Testing
Testing is the process of evaluating a software application or system to identify defects, ensure its functionality meets the desired requirements, and verify that it performs as intended. It helps in maintaining software reliability and usability.
There are two types of testing in general
Unit Testing
Integration Testing
Unit Testing
Unit testing is a level of software testing where individual components or units of a software application are tested in isolation. A "unit" typically refers to the smallest testable part of a program, such as a function, method, or class.
Integration Testing
Integration testing is a level of software testing that focuses on the interactions and interfaces between various units or components of a software system. The primary goal of integration testing is to ensure that these individual units when combined, work together as intended and that the interactions between them do not lead to defects or unexpected behavior.
React Testing Library & Jest
React Testing Library and Jest are two of the most popular tools used for testing React applications.
Setup
Firstly Install the react testing library package in your project using the following command
npm install --save-dev @testing-library/react
You might also need to set up a configuration file for Jest, such as jest.config.js or package.json settings.
Create the react components that you want to test.
In this blog, we are gonna see how to write a simple test for a component and run the tests.
Firstly, create a test file for your component the naming convention generally followed is ComponentName.test.js
Now, inside your test file import the required functions such as render and screen from the react testing library as well as the component that you want to test.
import React from 'react';
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';
Now let's understand how the react testing library and jest work!!
Structure of a test block
Render a component you want to test
Search for the element you want to interact with
After that assert/check the results to see whether they are working as desired
The code below shows how a test block is written
test('MyComponent renders correctly', () => {
render(<MyComponent />);
const element = screen.getByText('Hello, World!');
expect(element).toBeInTheDocument();
});
The above test checks whether the element having the text Hello, World! is rendering properly on the screen or not.
We use render function to render the component we are supposed to test on.
The screen object is an essential utility that provides methods for querying and interacting with the rendered components.
To understand these methods refer to the below chart
The chart shows what each function returns in the case of No Match, 1 Match, 1+ Match and async calls.
A Little bit about Jest
Jest is a JavaScript testing framework maintained by Facebook. It's a powerful and developer-friendly tool for testing JavaScript code, including React applications.
It provides features like test runners, assertion libraries, mocking, and code coverage out of the box.
Use Jest's test runner to execute your tests. You can do this through the command line with npm test or yarn test (if configured).
To learn more in-depth on testing refer to the following resources
Checkout React testing library documentation here Docs
đź“š Stay In the Know! Follow Our Blog
Discover a world of knowledge, inspiration, and insights right at your fingertips. Our blog is a treasure trove of valuable content that you won't want to miss. 🌟
Don't miss out! Click that "Follow" button now, and let the learning journey begin.
📖✨
