In this article we will discuss about the automatic testing of written software projects with some types of common testing process. First of all we will build to- do list app by Test-Driven Development (TDD) approach. Here I will use combination of RTL and Jest which were pre- installed in any new project created by Create-React-App (CRA).
At first you need to know the working process of new React project and how to set up and explore it and how to work with yarn package manager (or npm). One should know about Axios and React- Router.
Testing of Code
To hand over a software to the customer you should confirm that whether it satisfy all the specification or not as customer expectance.
Not only at the time of shipping, testing our code is essential for lifetime. There are many reason behind it:
We may update some parts of our application by changing the code.
A third party may interfere in this.
The browser which run the application may undergo breaking changes.
Some function may stop due to unexpected reason.
For this reason testing is important throughout lifetime of a project.
Types of Automated Testing
Unit test
This test verify the unit of our application which works isolately. For example it test particular function for known input and expected output.
Smoke test
It check the system whether up and running or not. For example in a React app we just need to render our main app components which would fairly render the browser.
Integration test
It check two or more module works together or not. For example server and database work together or not.
Functional test
The test is done to verify functional specifications of the system.
Acceptance test
This test is done by business owner whether for the system verification.
Performance test
It verify how the system work under load which specify how fast app load in a browser.
Importance of React Testing Library?
The most common React Testing options are Enzyme and React Testing Library (RTL).
RTL
It is very simple that the user need not to care whether you use redux or context for state management. They just fix your app in certain way you want. It just need to usual testing of app.
Advantages
It is very easy to use.
New React project comes with RTL and Jest configured.
Testing is done of your choice
Project Setup
To open a terminal follow the command:
# start new react project and start the server
npx create-react-app start-rtl && cd start-rtl && yarn startWhile a project running open separate terminal to run yarn test and then press a. Run all the project in watch mode which indicates that when detect changes it automatically run the file. In terminal picture is looked like
Green line means in the test we are passing with flying colours.
CRA sets up RTL and Jest are for sample test.
Jest is javascript testing network to running the test. It is not listed in package.json but can be find from yarn.lock.
Jest provide huge range of functionality like assertions, mocking, spying, etc.
There are some packages for testing specifications like:
testing-library/jest-dom: provides custom DOM element matchers for Jest.
testing-library/react: provides the APIs for testing React apps.
testing-library/user-event: provides advanced simulation of browser interactions
Testing And Building The To-Do List Index Page
The components specifications for the system are:
A loading indicator
Display the title of 15 to do list while returns to the APIs call.
To creat a file src/TodoList.js enter the content.
import React from "react";
import "./App.css";
export const TodoList = () => {
return (
<div>
</div>
);
};Isolation testing is done before incorporating into the app
Testing is also done to check any accidental fight fire.
To create a new file in src/TodoList.test.js enter the code.
import React from "react";
import axios from "axios";
import { render, screen, waitForElementToBeRemoved } from "./custom-render";
import { TodoList } from "./TodoList";
import { todos } from "./makeTodos";
describe("<App />", () => {
it("Renders <TodoList /> component", async () => {
render(<TodoList />);
await waitForElementToBeRemoved(() => screen.getByText(/Fetching todos/i));
expect(axios.get).toHaveBeenCalledTimes(1);
todos.slice(0, 15).forEach((td) => {
expect(screen.getByText(td.title)).toBeInTheDocument();
});
});
});The source of to do which can be used in list
const makeTodos = (n) => {
// returns n number of todo items
// default is 15
const num = n || 15;
const todos = [];
for (let i = 0; i < num; i++) {
todos.push({
id: i,
userId: i,
title: `Todo item ${i}`,
completed: [true, false][Math.floor(Math.random() * 2)],
});
}
return todos;
};
export const todos = makeTodos(200);
This function generated complete list, from where it is choosen by true and false.
Unit test should be done under few seconds where APIs calls are impractical.
To avoid APIs calls mocking should be done where original version is replaced by fake version.
Jest automatically provide mocking functions in the box.
To mock the Axios create a file src/_mocks_/axios.js and enter the below content:
Jest originally find the mock folder instead of find the original one.
Here we carried out a passing and a failings test.
Testing And Building The Single To-Do Page
To creating the list one should make it simplier
To add components create a file by src/TodoItem.js and content should added like
import React from "react";
import { useParams } from "react-router-dom";
import "./App.css";
export const TodoItem = () => {
const { id } = useParams()
return (
<div className="single-todo-item">
</div>
);
};The file is the const { id } = useParams() line which is attached from react-router-dom that lets us read URL parameters.
Here the situation is little different from the other because the user when click on the link
After satisfying we want to hold first item in the to-do list. To prevent collision with other URL, we use the global mock with Jest’s mockImplementationOnce.
The test is finished by adding position where it is expected.
Here we expected to see our name and who created this, but it is not sure about to-do status. Here we can create a switch block, if it is not work we can throw it like an error.
Conclusion
To understand this you need to write tests for React app, no matter how small it is. For better implementation you can use CRA’s testing docs and RTL’s documentation. For small tests make sure that all the components should render. You can continuously add more tests over that time.
We will be happy to answer your questions on designing, developing, and deploying comprehensive enterprise web, mobile apps and customized software solutions that best fit your organization needs.
As a reputed Software Solutions Developer we have expertise in providing dedicated
remote and outsourced technical resources for software services at very nominal cost. Besides experts in full stacks We also build web solutions, mobile apps and work on system integration, performance enhancement, cloud migrations and big data analytics. Don’t hesitate to get in touch with us!
Comments