Create a new FetchEvent instance within Jest specifically for a Cloudflare Worker deployment

Question

Create a new FetchEvent instance within Jest specifically for a Cloudflare Worker deployment

The TypeScript template repository for Cloudflare Workers includes a test that mocks a GET request by instantiating the Request to simulate the input parameters for the handleRequest function.

After some modifications to the template, I now pass the raw FetchEvent directly to the handleRequest method instead of using FetchEvent.request as the default. As a result, I need to find a way to instantiate FetchEvent in my test to pass it to handleRequest, rather than using Request.

I initially thought about adding node-fetch as a dev dependency to import FetchEvent, but it seems that this library doesn't offer an implementation for FetchEvent.

Is there a method to mock the FetchEvent without relying on another external dependency (such as within the Cloudflare Workers library itself)?

typescript jestjs cloudflare-workers

Answer 1

Answer №1

import { handleEvent } from '../src/handler'
import makeServiceWorkerEnv from 'service-worker-mock'

declare var global: any

function createEvent(request: Request): FetchEvent {
  // @ts-ignore Unfortunately, the typing seems to be incorrect here when creating a FetchEvent in a test environment.
  return new FetchEvent('fetch', { request })
}

describe('handle', () => {
  beforeEach(() => {
    Object.assign(global, makeServiceWorkerEnv())
    jest.resetModules()
  })

  test('handle GET', async () => {
    const fetchEvent: FetchEvent = createEvent(
      new Request('/', { method: 'GET' }),
    )
    const result = await handleEvent(fetchEvent)
    expect(result.status).toEqual(200)
  })
})

Please inform me if it functions correctly

Answer 2

import { handleEvent } from '../src/handler'
import makeServiceWorkerEnv from 'service-worker-mock'

declare var global: any

function createEvent(request: Request): FetchEvent {
  // @ts-ignore Unfortunately, the typing seems to be incorrect here when creating a FetchEvent in a test environment.
  return new FetchEvent('fetch', { request })
}

describe('handle', () => {
  beforeEach(() => {
    Object.assign(global, makeServiceWorkerEnv())
    jest.resetModules()
  })

  test('handle GET', async () => {
    const fetchEvent: FetchEvent = createEvent(
      new Request('/', { method: 'GET' }),
    )
    const result = await handleEvent(fetchEvent)
    expect(result.status).toEqual(200)
  })
})

Please inform me if it functions correctly

Create a new FetchEvent instance within Jest specifically for a Cloudflare Worker deployment

Answer №1

Similar questions

Describing an Object with some typed properties

Storing a byte array in a local file using JavaScript: A Step-by-Step Guide

Encountering npm3 installation errors with typyings in Angular 2?

I am interested in utilizing the request-reply pattern with KafkaJS in a TypeScript environment. Could you provide guidance on how to successfully implement this?

Error message "Property 'name' does not exist on type '{}'" is encountered when using Ionic/Angular HttpClient and no data type is specified

Exploring in Angular 2 by using First Name, Last Name, and Email for queries

What could be causing the discrepancy in alignment between a web application running on Mac and Windows using ReactNative?

TypeScript Error 2304: Element 'div' is nowhere to be found - CRA TypeScript Template

Is there a way to send client browser console logs to the backend via a REST API in an Angular 4 application?

Managing errors with Angular2 Observables within the HTML template

What are the best methods for testing a function containing multiple conditional statements?

Correctly inputting the 'in' statement - Avoid using a primitive value on the right side of an 'in' statement

Encountering a problem with lazy loading of module routing paths. Issue arises when attempting to navigate to http://localhost:4200

After compiling, global variables in Vue.js 2 + Typescript may lose their values

Unable to bring in an exported class from a TypeScript file

Is it possible to verify if a function is invoked using Jest, Typescript, and ts-jest in action?

Unit testing the error function within the subscribe method in Angular

Struggling to retrieve the 'this' object using a dynamic string

How can I use JavaScript to update the content inside HTML tags with a specific string?

The system is unable to process the property 'items' due to a null value