MSW does not intercept Api requests

[wiskani]

I'm trying to make a mock service worker for a simple API request like this: /src/api/Sectors.js:

export const getSectors = async (token) => {
    const requestOptions = {
        method: "GET",
        headers: {
            "Content-Type": "application/json",
            Authorization: "Bearer " + token,
        },
    };
    try {
        const response = await fetch("/api/sector/list", requestOptions);
        if (!response.ok) {
            return { error: `Request failed with status ${response.status}` };
        } else {
            const data = await response.json();
            return data;
        }
    } catch (error) {
        return { error: "Request failed" };
    }
};

My setup files are as follows:

jest.setup.js:

import "@testing-library/jest-dom";
import { server } from 'src/mocks/server.js';

beforeAll(() => {
    server.listen();
    console.log('server listening');
});

afterEach(() => server.resetHandlers());

afterAll(() => server.close());

jest.config.js:

const TEST_REGEX = "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|js?|tsx?|ts?)$";

module.exports = {
    testRegex: TEST_REGEX,
    transform: {
        // "^.+\\.tsx?$": "ts-jest",
        "^.+\\.jsx?$": "babel-jest",
        // "^.+\\.mjs$": "babel-jest",
    },
    testPathIgnorePatterns: ["<rootDir>/build/", "<rootDir>/node_modules/", "<rootDir>/dist/"],
    moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
    moduleNameMapper: {
        "^~(.*)$": "<rootDir>/src/$1"
    },
    modulePaths: ["<rootDir>"],
    testEnvironment: "node",
    setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
};

My setup for MSW is as follows:

/src/mocks/handlers.js:

import { rest } from "msw";

export const handlers = [
    rest.get("/api/sector/list", (req, res, ctx) => {
        console.log('api sector list');
        const token = req.headers.get("Authorization");

        if (!token) {
            return res(
                ctx.status(401),
                ctx.json({ error: "Authorization token is missing" })
            );
        }

        return res(
            ctx.status(200),
            ctx.json([
                { id: 1, name: "Sector 1" },
                { id: 2, name: "Sector 2" },
            ])
        );
    }),
];

/src/mocks/server.js:

import { setupServer } from 'msw/node';
import { handlers } from './handlers';

export const server = setupServer(...handlers);

And my test is as follows:

/tests/Sectors.test.js:

import { getSectors } from 'src/api/Sectors';

it("should fetch sectors successfully", async () => {
    const token = "fakeToken";
    const sectors = await getSectors(token);

    expect(sectors).toEqual([
        { id: 1, name: "Sector 1" },
        { id: 2, name: "Sector 2"

On the date, furthermore, the console log in handlers never prints. I assume that MSW never intercepts the API calls.

[kettanaito]

Hi, @wiskani. Does the console.log in the beforeAll() hook of your jest.setup.js prints? I suspect it doesn't, and if that's true, Jest doesn't pick up your setup file.

[wiskani]

Hi @kettanaito, thank you for your response. The console.log in the beforeAll() prints correctly, and I suspect that it might have something to do with my webpack configuration:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js',
		publicPath: '/'
	},
	mode: 'development',
	resolve: {
		extensions: ['.js', '.jsx'],
	},
	devServer: {
		historyApiFallback: true,
		host: 'localhost',
		port: 3000,
		proxy: {
			'/api': 'http://localhost:8000',
		},
	},
	module: {
		rules: [
			{
				test: /\.(js|jsx)$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader'
				}
			},
			{
				test: /\.html$/,
				use: [
					{
						loader: 'html-loader'
					}
				]
			},
			{
				test:/\.(css|scss)$/,
				use:[
					"style-loader",
					"css-loader",
					"sass-loader",
				],
			},
			{
				test: /\.(png|svg|jpg|gif)$/,
				type:'asset'
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './public/index.html',
			filename: './index.html'
		}),
		new MiniCssExtractPlugin({
			filename:'[name].css'
		})
	]
}

[kettanaito]

I don't think so if we're talking about Jest tests. Per your config, the only thing transforming your test code is babel-jest. Your webpack config has no effect on your tests.

The next reason why the API calls are not intercepted is if the end request URL ends up entirely different from what you're expecting in request handlers.

1. Update to the latest version of msw: npm i msw@latest.
2. Run your tests.

MSW will warn you if there's an unmatching request.

If that doesn't help, you can create a reproduction repository/sandbox and I may look into it when I have a minute.

[wiskani]

Thank you very much for your help. I tried updating MWS, but it didn't work. I submitted a CodeSandbox, maybe you can see something that I missed.

https://codesandbox.io/p/github/wiskani/frontend_preo/main?layout=%257B%2522activeFilepath%2522%253Anull%252C%2522openFiles%2522%253A%255B%255D%252C%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522fullScreenDevtools%2522%253Afalse%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522vertical%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522DEVTOOLS_PANELS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522panelType%2522%253A%2522TABS%2522%252C%2522id%2522%253A%2522clh6zxq7400gx2v6qydvwi5yb%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clh6zxq7400gx2v6qydvwi5yb%2522%253A%257B%2522id%2522%253A%2522clh6zxq7400gx2v6qydvwi5yb%2522%252C%2522activeTabId%2522%253A%2522clh6zy3wt00kq2v6qicn0kx73%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clh6zxq7400gw2v6qc5wnonqn%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522test%2522%257D%252C%257B%2522type%2522%253A%2522EMPTY_DEVTOOL%2522%252C%2522id%2522%253A%2522clh6zy3wt00kq2v6qicn0kx73%2522%257D%255D%257D%257D%252C%2522showSidebar%2522%253Atrue%252C%2522showDevtools%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%252C%2522editorPanelSize%2522%253A48.75%252C%2522devtoolsPanelSize%2522%253A35%257D

[wiskani]

I resolved the issue by including the "fetch" function in my test environment using the "whatwg-fetch" library:

import 'whatwg-fetch';
import '@testing-library/jest-dom';
import { server } from './src/mocks/server';

beforeAll(() => {
  server.listen();
  console.log('Server is listening...');
});

afterEach(() => {
  server.resetHandlers();
});

afterAll(() => {
  server.close();
});

[kettanaito]

Missing fetch polyfill strikes again! Glad you've solved it.