Cloudflare Developers•11mo ago

Mocking fetch

Hi folks, I've been looking for a way to mock outgoing fetch net requests and I've hit a brick wall with everything I could dig up. I am using wrangler v3.0.1 and have the following files:

// jest.config.js
const { defaults } = require("jest-config");

module.exports = {
    preset: 'ts-jest',
    testEnvironment: "miniflare",
    moduleFileExtensions: ["mjs", ...defaults.moduleFileExtensions],
};

// jest.config.js
const { defaults } = require("jest-config");

module.exports = {
    preset: 'ts-jest',
    testEnvironment: "miniflare",
    moduleFileExtensions: ["mjs", ...defaults.moduleFileExtensions],
};

// src/worker.ts

export default {
  async fetch(cfRequest: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
    const url = new URL('https://example.com');
    return sendRequestToAPI(url, { bodyStuff: 'here' }, env, cfRequest, ctx);
    const resp = await fetch('example.com');
  },
};

// src/worker.ts

export default {
  async fetch(cfRequest: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
    const url = new URL('https://example.com');
    return sendRequestToAPI(url, { bodyStuff: 'here' }, env, cfRequest, ctx);
    const resp = await fetch('example.com');
  },
};

// src/helpers.ts
export const sendToApi = async (
  url: URL,
  body: any,
  env: Env,
  cfRequest: Request,
  ctx: ExecutionContext
): Promise<Response> => {
  const request = {
    body: JSON.stringify(body),
    method: 'POST'
  };
    const response = await fetch(url, request);
    if (response.status !== 200) {
        return new Response('Bad', { status: 500 });
    } else {
        return new response('Good', {status: 200});
    }
}

// src/helpers.ts
export const sendToApi = async (
  url: URL,
  body: any,
  env: Env,
  cfRequest: Request,
  ctx: ExecutionContext
): Promise<Response> => {
  const request = {
    body: JSON.stringify(body),
    method: 'POST'
  };
    const response = await fetch(url, request);
    if (response.status !== 200) {
        return new Response('Bad', { status: 500 });
    } else {
        return new response('Good', {status: 200});
    }
}

... continues in a comment due to discord message length limits...

2 Replies

zedevs•11mo ago

These are the approaches I've tried 1. jest-fetch-mock - https://www.npmjs.com/package/jest-fetch-mock

// src/helpers.test.ts
import fetch from 'jest-fetch-mock';
import { sendToApi } from './helpers'
beforeEach(() => {
    fetch.resetMocks();
});

describe('helpers', () => {
    describe('sendToSuperglue', () => {
        // the line bellow acutally makes a net call...
        await sendToApi(url, {}, env, request, ctx)).status)
    });
});

// src/helpers.test.ts
import fetch from 'jest-fetch-mock';
import { sendToApi } from './helpers'
beforeEach(() => {
    fetch.resetMocks();
});

describe('helpers', () => {
    describe('sendToSuperglue', () => {
        // the line bellow acutally makes a net call...
        await sendToApi(url, {}, env, request, ctx)).status)
    });
});

2. Using getMiniflareFetchMock(): I dug up some documentation and also read https://discord.com/channels/595317990191398933/1078852838102417470/1078852838102417470 , but I get Cannot find name 'getMiniflareFetchMock'. I might have to configure wrangler/miniflare types, but I can't find any resource on that. I would appreciate any help. Thank you!

bernardo.abreu•3mo ago

Hey zedevs, did you find anything on this ?

Gaming

Programming

Mocking fetch