Forem: Adeku Ali

Guide to writing integration tests in express js with Jest and Supertest

Adeku Ali — Tue, 07 Mar 2023 08:22:44 +0000

Writing integration tests for new developers can prove a little tricky. During my first foray into writing integration tests, it took a while to understand how to write tests for express applications effectively.

While unit testing is a way of testing a unit - the smallest piece of code that can be logically isolated in a system, integration testing is testing all solid features that make up the application.

In this article, I illustrate how to write integration tests for a task manager API built with express.js.

Repository

Check out the complete source code here.

Prerequisites

Basic Knowledge of Javascript
Node installed on your device

Setting up your Test Folder Structure

In the root directory of your application, create a folder named test; in your test folder, create a folder called integration , and this folder should contain all your integration test files.

Integration test files should be named like this .spec.js or .test.js, so your test filenames should look like foo.spec.js or foo.test.js

Configuring Jest

You are going to make use of Jest as the testing framework. Jest is a JavaScript testing framework designed to ensure the correctness of any JavaScript codebase. It allows you to write tests with an approachable, familiar, and feature-rich API that gives you results quickly.

npm install jest --save-dev

In the package.json file, add a test script with the following command:

"test": "cross-env NODE_ENV=test jest --testTimeout=5000 --detectOpenHandles"

Jest runs in a browser-like environment using jsdom by default, but since this is a node application, a node-like environment is specified instead.

"jest": {"test environment": "node"}

Creating a Mock Database

You can create a mock database to avoid writing tests that interfere with the database. For this article, since MongoDB is used as the database, you will use MongoMemoryServer as your mock database.

MongoMemoryServer will spin up a real MongoDB server and allow storing test data in memory.

npm i mongodb-memory-server --save-dev

In your test folder, create a boostrap.js file; this should contain your mock database configuration.

test/bootstrap.js


    const mongoose = require("mongoose");
    const { MongoMemoryServer } = require("mongodb-memory-server");

    let mongod;

    beforeAll(async () => {
      mongod = await MongoMemoryServer.create();
      const uri = mongod.getUri();
      await mongoose.connect(uri);
    });
    afterAll(async () => {
      await mongoose.connection.dropDatabase();
      await mongoose.connection.close();
      await mongod.stop();
    });
    afterEach(async () => {
      const collections = mongoose.connection.collections;
      for (const key in collections) {
        const collection = collections[key];g,
        await collection.deleteMany();
      }
    });

Writing The Tests

To test the API endpoints of the application, you will import the instance of the application, the supertest module, and the task Model. The app.js file looks like this :

npm i supertest

app.js

  const express = require('express')
    const taskRouter = require("./routes/task");
    const notFound = require("./middlewares/not-found")
    const errorHandler = require("./middlewares/error-handler")
    const app = express()

    const morgan = require('morgan')

    app.use(express.static("./public"));
    app.use(express.json());
    app.use(morgan('dev'))
    app.use("/api/v1/tasks", taskRouter);
    app.use(notFound)

    module.exports = app

This file contains the tests for the API routes in the application.

test/integration/tasksController.test.js

const request = require("supertest");
    const app = require("../../app");
    const TaskModel = require("../../models/tasks");

    describe("Task Controller", () => {
      describe("create task", () => {
        it("should return 201 and the task created", async () => {
          const response = await request(app)
            .post("/api/v1/tasks")
            .set("content-type", "application/json")
            .send({
              name: "task testing",
              completed: "true",
            });

          expect(response.status).toBe(201);
          expect(response.body).toHaveProperty("tasks");
        });
      });

      describe("get all tasks", () => {
        it("should return 200 and all tasks", async () => {
          const response = await request(app)
            .get("/api/v1/tasks")
            .set("content-type", "application/json");

          expect(response.status).toBe(200);
          expect(response.body).toHaveProperty("tasks");
        });
      });

      describe("get a task", () => {
        let task;
        beforeEach(async () => {
          task = await TaskModel.create({
            name: "task testid",
          });
        });

        it("should return 200 and a single task", async () => {
          const response = await request(app)
            .get(`/api/v1/tasks/${task.id}`)
            .set("content-type", "application/json");

          expect(response.status).toBe(200);
          expect(response.body).toHaveProperty("task");
        });
      });

      describe("update a task", () => {
        let task;
        beforeEach(async () => {
          task = await TaskModel.create({
            name: "task2 testid",
          });
        });

        it("should return 404 if the task with the id doesnt exist", async () => {
          const taskId = "639c80ef98284bfdf111ad09";
          const response = await request(app).patch(`/api/v1/tasks/${taskId}`);

          expect(response.status).toBe(404);
          expect(response.body.msg).toEqual("this task does not exist");
        });


        it("should return 200 and the updated task", async () => {
          const response = await request(app)
            .patch(`/api/v1/tasks/${task.id}`)
            .send({ name: "newtask" });

          expect(response.status).toBe(200);
          expect(response.body).toHaveProperty("task");
        });
      });

      describe("delete a task", () => {
        let task;
        beforeEach(async () => {
          task = await TaskModel.create({
            name: "task2 testid",
          });
        });

        it("should return 404 if the task with the id doesnt exist", async () => {
          const taskId = "639c80ef98284bfdf111ad09";
          const response = await request(app).delete(`/api/v1/tasks/${taskId}`);

          expect(response.status).toBe(404);

          expect(response.body.msg).toEqual("this task does not exist");
        });

        it("should return 200 and the deleted task", async () => {
          const response = await request(app).delete(`/api/v1/tasks/${task.id}`);

          expect(response.status).toBe(200);
          expect(response.body).toHaveProperty("task");
        });
      });
    });

Conclusion

Testing is an art, and the knowledge to write good tests for your application can act as a first line of defence for your application.

In this article, you looked at how to write integration tests for an express application using Jest, Supertest, and mongodb-memory-server, configuring jest, and also creating and configuring your test mock database.

Resources

Jest documentation
Supertest

A step-by-step Guide to using Redux for State Management in React

Adeku Ali — Fri, 10 Feb 2023 00:28:26 +0000

Redux is a state management tool for JavaScript applications.
It provides a store for our applications and methods to get the state, listen to changes in your state, and update it.
In this article, you will learn how to use Redux in your React application by creating a simple todo application.

Repository

Check out the complete source code here

Prerequisites

The todo Application will be built with React and Redux.

Basic Javascript Knowledge
Node installed on your device
Basic understanding of React

Three Main Parts of Redux

Redux contains three main parts:

Store: a state container that holds all the application state and provides methods to interact with the state.
Actions: a plain object describing the change that occurred in your application. It must contain a type field indicating the action being performed.
Reducers: reducer is a function that takes the current state and the action which occurred and returns a new state.

Setting up Redux in a React application

Step 1: Install Redux and react-redux

    npm install redux react-redux

Step 2: Create a Redux folder in your src directory

The src/redux directory will contain your reducers, actions, and store.

Step 3: Create a todo folder in your redux folder

The src/redux/todo will contain your todoActions.js and todoReducer.js files.

Step 4: Create your actions

For each action object, add the type of the action and the payload, if necessary.

src/redux/todo/todoActions.js

export const addTask = (data) => ({
      type: "ADD_TASK",
      payload: data,
    });

    export const fetchTasks = (data) => ({
      type: "FETCH_TASK",
      payload: data,
    });

    export const deleteTasks = (task) => ({
      type: "DELETE_TASK",
      payload: task,
    });

    export const updateTasks = (task) => ({
      type: "UPDATE_TASK",
      payload: task,
    });

step 5: Create your reducers

Define the initial state of your todo application and create a Reducer function that takes in your initial state and action as parameters. State in react is immutable, meaning it should not change directly. So for every condition, a copy of the state is first made using the spread operator ...state.

src/redux/todo/todoReducers.js

const INITIAL_STATE = {
      todos: [],
    };

    const todoReducer = (state = INITIAL_STATE, action) => {
      switch (action.type) {
        case "ADD_TASK":
          return {
            ...state,
            todos: [...state.todos, action.payload],
          };

        case "FETCH_TASK":
          return {
            ...state,
            todos: action.payload,
          };

        case "UPDATE_TASK":
          return {
            ...state,
            todos: state.todos.map((todo) => {
              if (todo.id === action.payload) {
                todo.title = action.payload.title;
              }
            }),
          };

        case "DELETE_TASK":
          return {
            ...state,
            todos: state.todos.filter((todo) => todo.id !== action.payload),
          };
        default:
          return state;
      }
    };

    export default todoReducer;

step 6: Create your root-reducer

As the application grows more complex, it can contain multiple reducers which manage independent parts of your state; with the help of the combineReducers helper function provided by the Redux library, you can import all the reducers in the application, and export a single root reducer file.

src/redux/root-reducer.js

  import { combineReducers } from "redux";
    import todoReducer from "./todo/todoReducer";

    const rootReducer = combineReducers({
      todo: todoReducer,
    });

    export default rootReducer;

Step 7: Create the store

Create a store.js file in the src/redux folder. Add a middleware called redux-logger to help log your state changes in the console.

src/redux/store.js

 import { createStore, applyMiddleware } from "redux";
    import logger from "redux-logger";
    import rootReducer from "./root-reducer";

    const middlewares = [];

    if (process.env.NODE_ENV === "development") {
      middlewares.push(logger);
    }

    export const store = createStore(rootReducer, applyMiddleware(...middlewares));

    export default store;

step 8: Connect your Redux store to your application

Connecting your Redux store to your application requires wrapping your main app component in your src/index.js file with a Provider component, and passing your store into the provider component like a prop.

src/index.js

   import { Provider } from "react-redux";
    import store from "./Redux/store";
    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(
      <Provider store={store}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </Provider>
    );

Create a demo rest JSON web service using json-server and a db.json file with sample data in the src folder.
Redux has libraries like Redux-thunk for performing asynchronous tasks and data fetching, but handling asynchronous tasks in this application will be done in components.

Install json webserver

   npm install -g json-sever

Using Redux from the components

Now that you have set up the redux store, you can consume state and dispatch actions using useSelector and useDispatch hooks.

This form is the input form to create a task

AddForm.jsx

  <form onSubmit={handleSubmit}>
            <input
              name="task"
              placeholder="Add a task"
              type="task"
              value={task}
              onChange={handleChange}
            />
            <button>Add task</button>
          </form>

And in the handleSubmit handler function, make a request to the demo web service to add a task and dispatch our addTask action.

handleSubmit

     const handleSubmit = async (e) => {
        e.preventDefault();

        const {data} = await axios.post("http://localhost:4000/tasks", {
          title: task,
        });
        dispatch(addTask(data));

      };

Fetch All Tasks

Fetch all tasks in the app.js component and pass them to the AddForm.jsx component as a prop for it to be rendered.
In the useEffect hook, send a get request to your endpoint to get all the tasks and dispatch a fetchTasks action with the data obtained from the response as the payload.

   useEffect(() => {
        async function fetchData() {
          const { data } = await axios.get("http://localhost:4000/tasks");
          dispatch(fetchTasks(data));
        }
        fetchData();
      }, []);

Deleting a Task

To delete a task, create a handleDelete function and in it, send a delete request to your endpoint.

delete task

   const handleDelete = async (id) => {
        const res = await axios.delete(`http://localhost:4000/tasks/${id}`);
        dispatch(deleteTasks(id));
      };

Updating a Task

To update a task, create an input form in which you add your new update and also a handleUpdate function that takes care of sending a patch request to the endpoint.

UpdateForm.jsx

         <form onSubmit={handleSubmit}>
            <input
              name="task"
              placeholder="Add a task"
              type="task"
              value={task}
              onChange={handleChange}
            />
            <button onClick={()=>handleUpdate(params.id)}>Update task</button>
          </form>

handleUpdate

      const handleUpdate = async (id) => {

        const response = await axios.patch(`http://localhost:4000/tasks/${id}`, {
          title: task,
        });
        dispatch(updateTasks(task))
      };

After completing the application, your demo application will look like this:

Demo of the todo app

Conclusion

When working with small-scale applications, using Redux for state management adds an extra layer of complexity that is not necessary since the state does not need to be passed down to many child components.

For large-scale applications, managing state with Redux provides a single source of truth, making it easier to understand data flow throughout the application and providing state value to different components in our application.

Resources

Redux essentials
What is Redux?