How to Test React Components using Jest ?

React is a frontend open-source JavaScript library, used to build interactive User Interfaces. React is focused on Single Page applications and is more popularly known as a SPA. 

Testing is an important aspect of development. It examines whether the application is behaving as intended, and protects it when any unwanted changes are made to the application. There are various test libraries such as chai, mocha etc. In this tutorial, we'll be using the jest library along with reacting testing library to test out the React Components.

Prerequisites:

• Introduction to React
• Functional Components in React

Modules required:

• npm
• React

Creating React App and Setting Up:

Step 1: You will start a new project using create-react-app so open your terminal and type.

npx create-react-app jest-testing

Step 2: Switch to the jest-testing folder using the following command.

cd jest-testing

Step 3: Change to the src folder and remove the unnecessary stuff using the following command

cd src
rm*

Step 4: Create a components folder in the src folder

mkdir components

Step 5: Create a components folder in the src folder

cd components

Step 6: Create a Button folder and a Text folder

mkdir Button,Text

Step 7: Create a Button.js file and Button.test.js file inside the Button folder.

touch Button.js Button.test.js

Note: The name of the test file should be the same as the component and should be followed with a .test.js extension as when the tests are run using the npm test command, React automatically checks for all the file names with a .test extension and runs the tests.

Step 8: Create a Text.js file and Text.test.js file inside the Text folder.

touch Text.js Text.test.js

Step 9: In the src folder, create App.js, index.js, and App.test.js files.

touch App.js index.js App.test.js

Project Structure: The file structure in the project will look like this.

Example: Setup all the files with basic code to toggle the text GeeksForGeeks when a button is clicked.

index.js

Button.js

Text.js

App.js

Output: Run the following command to start up the application:

npm start

A simple app is created which toggles the text GeeksForGeeks when the button is pressed.

👁 Image

Now that the basic application is set up, we can begin testing it. Before testing the application let's learn about a few important testing methods.

• render(Component): Renders the given component on a mock screen.
• screen: A reference to the mock screen with various useful testing functions.
• cleanup(): Resets the DOM.
• afterEach(callback function): Runs the callback function given as a parameter after running each test suite.
• beforeEach(callback function): Runs the callback function given as a parameter before running each test suite.
• describe(nameOfTestSuite, callback function): Defines a test suite that contains many unit tests(Callback Function contains the unit tests).
• test(nameOfTest, callback function): Defines a test to be performed.
• fireEvent: Simulates a specified event.

Testing the Button Component: We are going to perform two tests on the Button Component. 

• Test 1: Testing if the button is rendered correctly to the DOM.
• Test 2: Testing if the button displays the text passed as a prop.

Button.test.js

Output:

Run the tests using the following command:

npm test

We can see that two test suites have failed and one has passed. The reason for this is that no tests have been designed for the Text Component and the App Component. So the only test suite passing is the Button Component.

Testing the Text Component: We are going to perform three tests on the Text Component.

• Test 1: Testing if the text element is rendered correctly to the DOM.
• Test 2: Testing the content of the text element when the toggle is set to true.
• Test 3: Testing the content of the text element when the toggle is set to false.

Text.test.js

Output:

Run the tests using the following command:

npm test

Testing the App Component: Testing the App Component is also known as integration testing as we the testing the application when we have integrated our button and text components. We are going to perform three tests on the App Component.

• Test 1: Testing whether all the components have rendered
• Test 2: Testing the default value of the text element
• Test 3: Testing the toggle ability of the button

App.js

Output: Run the tests using the following command:

npm test