jest-fetch-mock-cache

Caching mock implementation for jest-fetch-mock.

Copyright (c) 2023 by Gadi Cohen. MIT Licensed.

Introduction

Instead of individually handcrafting a mock for each and every fetch() call in your code, maybe you'd like to perform a real fetch() once, cache the result, and use that cache result for future calls. Super useful for TDD against existing APIs!!

Note: this is a brand new project. It works but you may want to wait a little before any serious use. Feature requests welcome!

Quick Start

1import fetchMock from "jest-fetch-mock";
2fetchMock.enableMocks();
3
4import { describe, expect, test as it } from "@jest/globals";
5import createCachingMock from "jest-fetch-mock-cache";
6
7// See list of possible stores, below.
8import Store from "jest-fetch-mock-cache/lib/stores/nodeFs";
9
10const cachingMock = createCachingMock({ store: new Store() });
11
12describe("cachingMock", () => {
13  it("works with a JSON response", async () => {
14    const url = "http://echo.jsontest.com/key/value/one/two";
15    const expectedResponse = { one: "two", key: "value" };
16
17    for (let i = 0; i < 2; i++) {
18      // If you get a TypeError here, make sure @types/jest is instaled.
19      fetchMock.mockImplementationOnce(cachingMock);
20      const response = await fetch(url);
21      const data = await response.json();
22      const expectedCacheHeader = i === 0 ? "MISS" : "HIT";
23      expect(response.headers.get("X-JFMC-Cache")).toBe(expectedCacheHeader);
24      expect(data).toEqual(expectedResponse);
25    }
26  });
27});

• The first time this runs, a real request will be made to jsontest.com, and the result returned. But, it will also be saved to cache.

• Subsequent requests will return the cached copy without making an HTTP request.

Note: the package is designed to be used with jest-fetch-mock, but that's not required. Since it's a complete impleemntation on its own, you could do something like

1// Do this and then use this `fetch()` function, or set global.fetch = ...
2const fetch = jest.fn(createCachingMock({ store: new Store() }));

What's cached

Sample output from the Quick Start code above, when used with NodeFSStore:

1$ cat tests/fixtures/http/echo.jsontest.com\!key\!value\!one\!two

1{
2  "request": {
3    "url": "http://echo.jsontest.com/key/value/one/two"
4  },
5  "response": {
6    "ok": true,
7    "status": 200,
8    "statusText": "OK",
9    "headers": {
10      "access-control-allow-origin": "*",
11      "connection": "close",
12      "content-length": "39",
13      "content-type": "application/json",
14      "date": "Fri, 21 Jul 2023 16:59:17 GMT",
15      "server": "Google Frontend",
16      "x-cloud-trace-context": "344994371e51195ae21f236e5d7650c4"
17    },
18    "bodyJson": {
19      "one": "two",
20      "key": "value"
21    }
22  }
23}

For non-JSON bodies, a bodyText is stored as a string. We store an object as bodyJson for readability reasons.

Debugging

We use debug for debugging. E.g.:

1$ DEBUG=jest-fetch-mock-cache:* yarn test
2yarn run v1.22.19
3$ jest
4  jest-fetch-mock-cache:core [jsmc] Fetching and caching 'http://echo.jsontest.com/key/value/one/two' +0ms
5  jest-fetch-mock-cache:core [jsmc] Using cached copy of 'http://echo.jsontest.com/key/value/one/two' +177ms
6 PASS  src/index.spec.ts
7  cachingMock
8    ✓ should work (180 ms)

Available Stores

1import createCachingMock from "jest-fetch-mock-cache";
2
3// Use Node's FS API to store as (creating paths as necessary)
4// `${process.cwd()}/tests/fixtures/${filenamifyUrl(url)}`.
5// https://github.com/sindresorhus/filenamify-url
6import JFMCNodeFSStore from "./stores/nodeFs";
7const fsCacheMock = createCachingMock({ store: new JFMCNodeFSStore() });
8fetchMock.mockImplementationOnce(fsCacheMock);
9// To override the store location, init with store with e.g.:
10// new JFMCNodeFSStore({ location: "tests/other/location" })
11
12// Keep in memory
13import JSMCMemoryStore from "./stores/memory";
14const memoryCacheMock = createCachingMock({ store: new JSMCMemoryStore() });
15fetchMock.mockImplementationOnce(memoryCacheMock);

Create your own Store

1import JFMCStore from "jest-fetch-mock-cache/lib/store";
2import type { JFMCCacheContent } from "jest-fetch-mock-cache/lib/store";
3import db from "./db"; // your existing db
4
5class MyCustomStore extends JFMCStore {
6  async fetchContent(req: Request): Promise<JFMCCacheContent | undefined> {
7    const key = await this.idFromResponse(req);
8    return (await db.collection("jfmc").findOne(key)).content;
9  }
10
11  async storeContent(req: Request, content: JFMCCacheContent): Promise<void> {
12    const key = await this.idFromResponse(req);
13    await db.collection("jfmc").insertOne({ _id: key, content });
14  }
15}
16
17export default MyCustomStore;

TODO

• Browser-environment support. Please open an issue if you need this, and in what cases. jsdom?
• Cache request headers too and hash them in filename / key / id.
• Handle and store invalid JSON too.