Unit Testing

Testing React Applications.

Testing is an important aspect of building a reliable app, especially in large-scale apps developed by different people. Though it’s quite impossible to have 100% error-free apps, with testing

• we reduce bugs as much as possible.
• Improve the quality of code.
• Gain a level of certainty and confidence that the App functionality will work as intended.

We have different testing types: unit testing, end to end testing, integration testing, UI testing. For a beginner, we will look at basic unit testing in React.

What Is Unit Testing?

Unit testing is testing of individual parts or components of the Application, each component is tested in isolation ensuring it works without dependency. In unit testing, we just want to check that the expected result is the output.

Tools used for testing

React Testing Libray
React Testing Library (RTL) is a library for testing components in React applications. The library can be used with other test runners to add utilis for testing.

Jest
Jest is a popular javascript test runner library built by Facebook and can be used with other third-party frameworks such as Enzyme. Other test runners for React include Mocha, Jasmine, Chai.
Jest helps us test the behavior of our React components from the perspective of the end-users that will use our app.

Installation
Jest is installed when you use Create-React-App to start your app. If you are using a custom React setup, you can install the React Testing library using the command.
npm install --save-dev @testing-library/react
and Jest
npm install — save-dev jest

Examples

Let’s test a basic Reactjs Counter App using Jest.
1. using the command, we create a directory testing to set up a React project folder testing-with-jest

mkdir testing
npm create-react-app testing-with-jest

We use Create-React-App to set up our App, hence the React testing library and Jest comes pre-installed,

2. Create a component called Counter.js in the src/component folder. Add the codes below

3. Create a folder _tests_ in the src folder, create a counter.test.js file with the codes below to the _tests_ folder

Describe: it creates a block to contain several related tests. it takes two arguments: a string for describing the test suite and a callback function for wrapping the actual test.
test: we write the actual test for a component. it takes two arguments: a string for describing the test and a callback function.
render: A method for rendering React components in the testing environment.
screen: screen is a method provided by the react-testing library to make queries of the rendered elements of the DOM, hence making assertions on text content and attributes of the rendered elements.
getByRole, getByText, getByTestId: React Testing Library provides different query methods for selecting elements .
toHaveTextContent: This is an assertive function to check if an element or text content or attribute exists. React testing library and jest provide various assertive functions for this purpose.
UserEvent: To simulate an actual end-user interaction like clicking, mouse-over, etc. We have the React testing library function such as :userEvent and fireEvent to trigger such activities during testing.
expect: When you’re writing tests, you often need to check that values meet certain conditions. expect gives you access to several "matchers" that let you validate different things -Jest.

To run a test file
Open the terminal and run npm test Jest recognizes .test. js files anywhere in the project folder.
You can also install the VScode jest Extension from the marketplace.

Code Coverage

Jest has this powerful tool to tell us how many lines/blocks/arcs of your code are executed while the automated tests are running. Code coverage tells you how much of your code is covered under tests.
You can use code coverage by running the command
npm test -- --coverage

the result looks like this, if your coverage is less than 100%, you can try to work on it to 100%.

There are other scenarios in React to test such as Context, API requests, useReducer, Redux, Forms, etc However I hope this guide helps you to understand the basics.

Great resources to learn more :
https://testing-library.com/docs/react-testing-library/intro/https://github.com/kentcdodds/testing-react-apps