Mocking fetch#

“Joyful” Pyodide dev means sitting in NodeJS tooling. But we’re writing a browser app, which is going to issue HTTP requests using fetch. How do we replace the server? We’ll start the process of using mocks.

Vitest config file#

Our path to mocking begins with a small Vitest configuration file at vitest.config.js in the top-level folder:

import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    setupFiles: ["./test/setup.js"],

It’s one job: point at a “setup” file which will mock our fetch request.

:::{note} Vitest, mocking, and MSW The Vitest mocking docs recommend using Mock Service Worker. Alas, that begins a rabbit hole. MSW doesn’t support NodeJS native fetch). It instead relies on node-fetch, which requires absolute URLs. :::

Vitest setup test#

We’re about to write some JavaScript to mock fetch requests and responses. Let’s do that by…writing a test!

Put this in tests/setup.test.js:

import {expect, test} from "vitest";
import {mockFetch} from "./setup.js";

test("File mapping works", async () => {
    const response = await mockFetch("./");
    const responseText = await response.text();
    expect(responseText).to.contain("from pathlib");

The test fails, as we haven’t started tests/setup.js yet.

Vitest setup file#

Let’s now write our Vitest setup file at tests/setup.js:

import {vi} from "vitest";
import {readFileSync} from "node:fs";

const INIT_PATH = "src/pyodide_components/";
const INIT_CONTENT = readFileSync(INIT_PATH, "utf-8");

const FILES = {
    "./": INIT_CONTENT,

export async function mockFetch(url) {
    if (url.includes("pyodide")) {
        return {
            ok: true,
            status: 200,
    const fileText = FILES[url];
    return {
        ok: true,
        status: 200,
        text: async () => fileText

vi.stubGlobal("fetch", mockFetch);

This setup file is run whenever a test sessions starts up. It’s useful for global initialization. Several notable points:

  • vi installs mockFetch in the place of fetch

  • mockFetch returns the file content from certain matched URLs

Implementation in worker.js#

With this code in worker.js:

export async function initialize() {
    let loaderContent;
    const pyodide = await loadPyodide();
    const response = await fetch("./");
    if (response.ok) {
        loaderContent = await response.text();
    } else {
        console.log("Failed to fetch");
    return pyodide;

…our test now passes. You can see the await fetch("./") line. When this is run under NodeJS and Vitest, the mock takes over. No HTTP request is sent. Instead, the contents of src/pyodide_components/ are read from disk and returned to the fetch.


We covered a lot of NodeJS weirdness in this step:

  • fetch and versions of NodeJS

  • Vitest configuration files

  • Vitest setup files

  • Installing mocks (and writing tests for them)

Truth be told, it’s about the same as getting up-to-speed with pytest and network mocking. Ultimately, it’s worth the investment.