A guide on using sinon to stub express middleware in a typescript project

I'm currently facing a challenge in writing an integration test for my express router using typescript, mocha, sinon, and chai-http. The router incorporates a custom middleware I created to validate JWT tokens present in the header.

My goal is to mock the authMiddleware so that I can manipulate its behavior without needing to provide valid or invalid JWT tokens for each test case.

However, when attempting to stub the authMiddleware in my tests, I discovered that the express app was utilizing the actual implementation of the middleware instead of the mocked version.

I even tried importing the app after mocking the authMiddleware with dynamic imports in typescript, but unfortunately, it didn't yield the desired outcome either.

authMiddleware.ts

import { Request, Response, NextFunction } from 'express';

export default class AuthMiddleware {
    
    verifyToken(req: Request, res: Response, next: NextFunction) :void {
        console.log('Actual implemetation of verifyToken is called!');
        
        // verify token
        
        next();
    }
}

subjectRouter.ts

import express from'express';
import AuthMiddleware from '../middleware/authMiddleware';
import * as subjectController from '../controller/subjectController';

const router = express.Router();
const authMiddleware = new AuthMiddleware();

router.post('/', authMiddleware.verifyToken, subjectController.createSubject);

export default router;

app.ts

import express from 'express';
import subjectRoute from './route/subjectRoute';

// Initilize express app
const app = express();

app.set("port", 3000);

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// Routers
app.use('/user', userRoute);
app.use('/subject', subjectRoute);

export default app;

subjectTests.ts

import app from '../../src/app';
import AuthMiddleware from '../../../src/middleware/AuthMiddleware';

describe('Subject', () => {

    let app;
    
    beforeEach(async () => {
        sinon.stub(AuthMiddleware.prototype, 'verifyToken').callsFake((req: Request, res: Response, next: NextFunction): void => {
            console.log('Fake verifyToken is called!');
             
            // THIS IS NEVER CALLED IN TESTS...

        });
        app = (await import('../../../src/app')).default;
    });

    it('should throw 403 when jwt is missing in header', (done) => {
        request(app)
            .post(/subject)
            .end((err, res) => {
                expect(res).has.status(403);
                done();
            });
    });
});

Upon running the above test, I noticed that the mocked authMiddleware wasn't being invoked. Instead, the app in the tests continued to leverage the original implementation of the authMiddleware object.

Is there a method to effectively stub express middleware and explicitly pass it to the app?

Answer №1

I have just explained the situation in my response, which can be found here, providing a workaround solution.

Upon further consideration, I believe the most effective way to address this issue is by eliminating global state from your modules and encapsulating the entire initialization code within explicitly invoked functions (or classes if preferred), allowing you to create a new server for each test. Essentially, restructuring your architecture as follows:

// router.ts
export function createRouter() {
    /// ...
    router.post('/', authMiddleware.verifyToken, subjectController.createSubject);
    return router;
}

// app.ts
import { createRouter} from "./router.js"
export function createApp() {
   ///same code as currently, but in function
   app.use('/subject', createRouter());
}

By adopting this approach, you are able to instantiate a new "app" in every setup callback:

// test.ts
beforeEach(async () => {
    sinon.stub(AuthMiddleware.prototype, 'verifyToken').callsFake((req: Request, res: Response, next: NextFunction): void => {
        ...
    });
    app = (await import('../../../src/app')).createApp(); // note that we create new app for each test, preventing pollution of global app state
});

This strategy offers numerous benefits including:

  • The ability to mock various functions for different tests;
  • The elimination of "implicit singletons" from your code, which was the root cause of the initial problem.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing the names of the remaining variables while object destructuring in TypeScript

UPDATE: I have created an issue regarding this topic on github: https://github.com/Microsoft/TypeScript/issues/21265 It appears that the syntax { ...other: xother } is not valid in JavaScript or TypeScript, and should not compile. Initial Query: C ...

Determine through programming whether an ng-content slot has been filled in Angular

I have developed a dynamic Angular component that utilizes content projection and slots in the following way: <div class="content-wrapper"> <div class="short-wrapper" [style.opacity]="expanded ? 0 : 1"> ...

I find myself hindered by TypeScript when trying to specify the accurate constraints for getUserMedia

I'm having difficulty getting a screen to stream within my Angular 5 Electron application. I am utilizing the desktopCapturer feature provided by Electron. Below is an excerpt of my code: loadCurrentScreensource() { desktopCapturer.getSources({ ...

Unable to verify token within JWT Express middleware

I am encountering an issue with the validation of JWT tokens. When sending a GET request using Postman, the validation process fails to work as expected. Surprisingly, the request can go through even without a token. My concern is regarding utilizing this ...

React did not allow the duplicate image to be uploaded again

I've implemented a piece of code allowing users to upload images to the react-easy-crop package. There's also an "x" button that enables them to remove the image and upload another one. However, I'm currently facing an issue where users are ...

Node receiving empty array as result after processing post request

My current task involves testing the post method on Postman. Strangely, every time I post the result it shows an empty array []. Upon further investigation by console logging on the node side, it also returns an empty array. CREATE TABLE users ( user_ ...

Executing a NestJs cron job at precise intervals three times each day: a guide

I am developing a notifications trigger method that needs to run three times per day at specific times. Although I have reviewed the documentation, I am struggling to understand the regex code and how to customize it according to my requirements! Current ...

What is the method for displaying an object as JSON on the console in Angular2?

I've been utilizing a service to input my form data into an array within my angular2 application. The information is organized in the following manner: arr = [] arr.push({title:name}) After executing console.log(arr), it displays as Object. However, ...

Managing promise handling errors in MySQL on Debian and VMWARE: Best practices

Recently, I have been working on integrating argon2 into my login application that connects to a MySQL database. Despite successfully storing the username and hashed password in the database, I encountered a promise handling error when attempting to log in ...

Locating and modifying nested properties within a document using Elasticsearch and express.js

After successfully implementing the addition of an element to a nested property list, I am now facing difficulties with updating document properties in Elasticsearch. My approach involves using Axios as the main library for handling HTTP client requests. B ...

There are no imports in index.js and there is no systemjs configuration set up

After creating a fresh Angular project using ng new some-name, I noticed that the generated index.html file does not include any <script> tags and there is no SystemJS configuration either. Is this the expected behavior? I was anticipating the CLI ...

Creating an HTML tag from Angular using TypeScript

Looking at the Angular TypeScript code below, I am trying to reference the divisions mentioned in the HTML code posted below using document.getElementById. However, the log statement results in null. Could you please advise on the correct way to reference ...

Ways to distribute mongoose schemas among several microservices

Within my application, I have created a User model using Mongoose: import mongoose from 'mongoose'; const UserSchema = new mongoose.Schema({ name: String, email: { type:String, required:true, unique:true, }, ...

Tips for synchronizing response JSON with TypeScript interface in Angular 6

I am retrieving a list of files that have been uploaded from a backend endpoint, and it comes back in this format: [ { "filename": "setup.cfg", "id": 1, "path": C:\\back-end\\uploads\\setup.cfg", ...

How can I add multiple filters to a Kendo Grid?

Is there a way to include two separate filter fields for date filtering in Kendo Grid UI? Currently, the method I am using only allows for one date filter to be displayed. filterable: { ui: function (element: any) { element.ken ...

Learn how to dynamically add and remove a CSS class from an element using a scroll event in Angular 7

My goal is to create a navbar that gains a "fixed-top" class during scrolling and removes it when it reaches the top of the page. I've written the following script, but unfortunately, it's not working as expected. import { Component, OnInit, Af ...

Error receiving by React while updating an array with setState() in TypeScript

I am in search of a way to adjust a property of an item within an array by using the updater returned from setState. The function is passed down as props to the child, who then invokes it with their own index to update their status. const attemptToUpdate ...

"Error: Variable becomes undefined due to the implementation of async-await in TypeScript

There has been a persistent issue I've been dealing with for some time now. The problem lies in the fact that vm_res is undefined within the async update_vm_raw_device function despite the function running smoothly. As a result, the value being update ...

When attempting to delete a row from an sqlite database, Express.js throws a "TypeError: Cannot read property 'id' of undefined" error

I'm currently working on developing a simple CRUD API. I have successfully implemented functionalities to retrieve all parts, fetch a part by its ID, and add a new part. However, I am encountering an issue with the delete part method as it keeps gener ...

Incorporating onPause and onResume functionalities into a YouTube video featured on a page built with Ionic 2

I'm encountering a minor problem with a simple demo Android app built in Ionic 2. Whenever a Youtube video is playing on the Homepage, if the power button is pressed or the phone goes into sleep/lock mode, the Youtube video continues to play. This is ...