Only by writing tests can you understand the significance of testing. No coding Bootcamp or course, as far as I know, teaches you how to write tests. Writing tests may not be necessary for demo projects or coursework projects, but it is critical for real-world applications. So, in this of the " " series, I'll demonstrate how to write tests for ReactJs components and ExpressJs RESTAPI. Part 3 Let's build and deploy a full stack MERN web application Let's get started What is testing? During the testing stage of software development, the application's actual outcomes are compared to those that were expected. Before deploying your application, this phase is used to ensure that everything is functioning as it should. Beginner developers frequently believe that writing tests are a time-consuming and unimportant process. But they are ignorant of the fact that testing actually buys you a lot of time in the long run. You can think of testing as a one-time investment. Software development uses a variety of testing methods, including Unit Testing, Integration Testing, Beta Testing, Regression Testing, and others. We will learn about in this lesson and how to create tests for applications built with ReactJs and NodeJs. Unit Testing What is Unit Testing? As the name implies, unit testing involves testing individual pieces of code or an application. For instance, in REST API, we are able to create distinct tests for each endpoint, and in a ReactJs application, we can test each component separately. Let's begin creating tests for our "Productivity Tracker" application. (If you don't know what this is, read the previous article - ) Adding Authentication to full stack MERN web application Writing tests in NodeJs application with Jest and SuperTest Note: I recommend setting up a separate database for testing purposes. But for this tutorial, it's not necessary. Step 1: Separate application and server First, we have to separate the server from the application because we are using SuperTest to test the application, not the server. So create an file in the root and paste this code. app.js const express = require("express");
const cors = require("cors");

const ActivityRouter = require("./routes/activity.route");
const AuthRouter = require("./routes/auth.route");

const app = express();

/* Telling the application to use the express.json() middleware. This middleware will parse the body of
any request that has a Content-Type of application/json. */
app.use(express.json());

/* Allowing the frontend to access the backend. */
app.use(cors());

/* This is a route handler. It is listening for a GET request to the root route of the application.
When it receives a request, it will send back a response with the string "Hello World!". */
app.get("/", (req, res) => {
  res.send("Hello World!");
});

/* Telling the application to use the ActivityRouter for any requests that start with "/api". */
app.use("/api", ActivityRouter);

/* Telling the application to use the AuthRouter for any requests that start with "/api/auth". */
app.use("/api/auth", AuthRouter);

module.exports = app; ... and in . server.js const express = require("express");
const mongoose = require("mongoose");

const app = express();

/* Loading the environment variables from the .env file. */
require("dotenv").config();

const PORT = process.env.PORT || 5000;
const MONGODB_URI = process.env.MONGODB_URI || "mongodb://localhost/todoapiDB";

/* Connecting to the database and then starting the server. */
mongoose
  .connect(MONGODB_URI, { useNewUrlParser: true })
  .then(() => {
    app.listen(PORT, console.log("Server stated on port 5000"));
  })
  .catch((err) => {
    console.log(err);
  }); Step 2: Install packages To start writing tests, you need three npm packages: , , and . jest supertest cross-env npm i --save-dev jest supertest cross-env : Jest is a framework for testing JavaScript code. Unit testing is its main usage of it. : Using Supertest, we can test endpoints and routes on HTTP servers. : You can set environmental variables inline within a command using cross-env. jest supertest cross-env Step 3: Add test script Open your file and add the test script to the scripts. package.json "scripts": {
    "test": "cross-env NODE_ENV=test jest --testTimeout=5000",
    "start": "node server.js",
    "dev": "nodemon server.js"
}, In this case, is set to because it's possible for certain requests to take a while to complete, and is being used to set environment variables and to run test suites. testTimeout 5000 cross-env jest Step 4: Start writing tests First, create a folder called at the application's root, and then create a file there called . Jest searches for the folder at the project's root when you do . As a result, you must place your test files in the folder. tests/ activity.test.js tests/ npm run test tests/ Next, import the and packages into the test file. supertest mongoose const mongoose = require("mongoose");
const request = require("supertest"); Import to load environment variables, and import as that is where our application starts. dotenv app.js const mongoose = require("mongoose");
const request = require("supertest");

const app = require("../app");

require("dotenv").config(); You'll need to connect and disconnect the database before and after each test (because we don't require the database once testing is complete). /* Connecting to the database before each test. */
beforeEach(async () => {
  await mongoose.connect(process.env.MONGODB_URI);
});

/* Closing database connection after each test. */
afterEach(async () => {
  await mongoose.connection.close();
}); Now write your first unit test. describe("GET /api/activities", () => {
  it("should get all the activities", async () => {
    const token = await request(app).post("/api/auth/login").send({
      email: process.env.EMAIL,
      password: process.env.PASSWORD,
    });

    const response = await request(app)
      .get("/api/activities")
      .set({
        Authorization: "bearer " + token.body.token,
        "Content-Type": "application/json",
      });

    expect(response.statusCode).toBe(200);
    expect(response.body.length).toBeGreaterThan(0);
  });
}); In the above code, We use to describe the unit test. Even though it is not required, it will be useful to identify tests in test results. describe In , we write the actual test code. Write the expected result in the first argument, and then in the second argument, write a callback function that contains the test code. it In the callback function, the request is sent to the endpoint first, and the expected and actual responses are then compared. The test passes if both answers match, else, it fails. Note: Since we have authenticated routes in our application, we need to get the token by logging in to the application and using that token to access the route. You can write tests for all the endpoints in the same manner. describe("POST /api/activity", () => {
  it("should add an activity to the database", async () => {
    const token = await request(app).post("/api/auth/login").send({
      email: process.env.EMAIL,
      password: process.env.PASSWORD,
    });

    const response = await request(app)
      .post("/api/activity")
      .send({
        name: "Jogging",
        time: "3:00 PM",
      })
      .set({
        Authorization: "bearer " + token.body.token,
        "Content-Type": "application/json",
      });

    expect(response.statusCode).toBe(201);
  });
}); Then run to run the test suites (suite - test file). npm run test Writing tests in ReactJs application with React Testing Library In the same way, let's write tests for React applications. For this, we will be using . React Testing Library The family of packages helps you test UI components in a user-centric way. @testing-library Step 1: Install packages To start writing tests in React, you need React Testing Library. But these packages come pre-installed with (CRA). If you haven't used CRA you can install them like this. create-react-app npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event Step 2: Create test files It's a good practice to create a test file for every component. We have 2 components that need to be tested - and . So create and in the folder. file. <App /> <Login /> App.test.js Login.test.js src/ But for now create only the App.test.js Step 3: Start writing tests Write your first test. In the file add the attribute to the main heading element. Later, while writing tests we can refer to this element with this id. App.jsx data-testid={"app-header-heading"} <h1 data-testid="app-header-heading">Productivity Tracker</h1> Now, open the file and paste the below code. App.test.js import { render, screen } from "@testing-library/react";

import App from "./App";

/* This is a test that is testing the App component. 
 * It is testing that the heading is correct. */
describe("App", () => {
  it("should have exact heading", () => {
    /* Rendering the App component. */
    render(<App />);

    /* Getting the element with the test id of "app-header-heading". */
    const mainHeading = screen.getByTestId("app-header-heading");

    /* Checking that the innerHTML of the element with the test id of "app-header-heading" is equal to
    "Productivity Tracker". */
    expect(mainHeading.innerHTML).toBe("Productivity Tracker");
  });
}); In the above code, We first imported the required packages - and from and then imported the component that needs to be tested. render screen @testing-library/react To describe the unit test, we use the same syntax as in express. Most React developers, by convention, put the component name in the first argument. The actual test is written as a callback function in the second argument. In , we write the actual test code. Write the expected result in the first argument, and then in the second argument, write a callback function that contains the test code. it Rest of the code is self-explanatory and you can also understand from the comments. We are expecting the App component should contain a heading called "Productivity Tracker". This is the general flow of writing a test for a React component: Render the component -> Write elements you want to interact with -> Interact with those elements -> Assert that the outcomes are as expected. Now run the command. You will see the results. npm test Please refer to official docs to learn more about React Testing Library and write your own tests. As a challenge, try to implement the "Add activity" flow.
In the next article, we will learn some DevOps stuff. Also read, Part 1: Let's build and deploy a full stack MERN web application Part 2: How to Add Authentication to a Full Stack MERN Web Application Feel free to ask your doubts in the comments. Also published . here

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

All Types of POST Requests With API Tester

How to Add Authentication to a Full Stack MERN Web Application

Website

Hire Me

Nominated for 2022 - HackerNoon Contributor of the Year - Mongodb

Nominated for 2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Too Long; Didn't Read

Make resilience your competitive advantage

A Guide on Writing Tests in Full-stack MERN Web Application

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

3 Most Common Ways to Connect your Node and React Applications

What is a Full Stack Developer and How Do You Become One?

A Full Stack Dev's First Impressions of the Salesforce Platform, Part 2

A Guide to Finding and Hiring Quality Freelancers for Web Development

A Look Into my Writing Process: Interview With Serhii Rubets, Full-Stack Software Engineer

3 Most Common Ways to Connect your Node and React Applications

What is a Full Stack Developer and How Do You Become One?

A Full Stack Dev's First Impressions of the Salesforce Platform, Part 2

A Guide to Finding and Hiring Quality Freelancers for Web Development

A Look Into my Writing Process: Interview With Serhii Rubets, Full-Stack Software Engineer

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps