Skip to content

Creating a Fetch Mocker

A fetch mocker in Mentoss is how you create a mocked version of a fetch() function. Fetch mockers are used to intercept calls to fetch() and return responses that you’ve defined in your mock servers. This allows you to test your code without making real network requests.

Create a new FetchMocker instance

To get started, import the FetchMocker class and create a new instance. The only argument is an object with the following properties:

  • servers (required) - an array of MockServer instances to use for mocking fetch requests

Here’s an example:

import { MockServer, FetchMocker } from "mentoss";
const server = new MockServer("https://api.example.com");
const mocker = new FetchMocker({
servers: [server],
});

With your fetch mocker created, you can now use it to mock the fetch() function.

Use the mocked fetch() function

There are two ways to use a mocked fetch() function:

  1. Use the fetch() function exported from the fetch mocker
  2. Mock the global fetch() function and then use it as usual

Use the exported fetch() function

Each FetchMocker instance creates a fetch() function that can be extracted and used in place of the global fetch() function. Here’s an example:

import { MockServer, FetchMocker } from "mentoss";
import { expect } from "chai";
describe("My API", () => {
const server = new MockServer("https://api.example.com");
const mocker = new FetchMocker({
servers: [server],
});
// extract the fetch function
const myFetch = mocker.fetch;
// reset the server after each test
afterEach(() => {
mocker.clearAll();
});
it("should return a 200 status code", async () => {
// set up the route to test
server.get("/ping", 200);
// make the request
const response = await myFetch("https://api.example.com/ping");
// check the response
expect(response.status).to.equal(200);
});
});

In this example, the fetch() function is extracted from the mocker instance and used to make a request to the server. This allows you to use the mocked fetch() function without affecting the global fetch() function, which can be useful in certain testing scenarios.

Mock the global fetch() function

If you want to mock the global fetch() function, you can use the mockGlobal() and unmockGlobal() methods provided by the fetch mocker. Here’s an example:

import { MockServer, FetchMocker } from "mentoss";
import { expect } from "chai";
describe("My API", () => {
let mocker;
const server = new MockServer("https://api.example.com");
mocker = new FetchMocker({
servers: [server],
});
// mock the global fetch function
before(() => {
mocker.mockGlobal();
});
// reset the server after each test
afterEach(() => {
mocker.clearAll();
});
// unmock the global fetch function
after(() => {
mocker.unmockGlobal();
});
it("should return a 200 status code", async () => {
// set up the route to test
server.get("/ping", 200);
// make the request
const response = await fetch("https://api.example.com/ping");
// check the response
expect(response.status).to.equal(200);
});
});

In this example, the mockGlobal() method is called before the tests to mock the global fetch() function. The unmockGlobal() method is called after the tests to restore the original fetch() function. This allows you to use the mocked fetch() function in your tests without affecting other parts of your code that rely on the global fetch() function.

Mock fetch() on specific objects

You can also mock the fetch() function on specific objects using the mockObject() and unmockObject() methods. This is useful when you want to mock fetch only in certain contexts or on specific objects. Here’s an example:

const myApi = {
fetch: globalThis.fetch,
async getData() {
return this.fetch("/api/data");
}
};
// mock fetch only on myApi
mocker.mockObject(myApi);
// mock fetch with a custom property name
mocker.mockObject(myApi, "customFetch");
// restore original fetch functions
mocker.unmockObject(myApi);

This approach is particularly useful when:

  • You want to mock fetch only for specific modules or objects
  • You’re working with objects that use a different property name for fetch
  • You need to maintain different fetch implementations in different parts of your code