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 ofMockServer
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:
- Use the
fetch()
function exported from the fetch mocker - 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 myApimocker.mockObject(myApi);
// mock fetch with a custom property namemocker.mockObject(myApi, "customFetch");
// restore original fetch functionsmocker.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