@fetch-mock/vitest error: Cannot read properties of undefined (reading 'callHistory')

[prescottprue]

Setup @fetch-mock/vitest as per documentation and I have two issues:

1. Types aren't being loaded when using TS, resulting in Property 'toHavePatched' does not exist on type 'Assertion<FetchMockVitest>' - I didn't see anything in the docs about needing to do a manual override of Vitest types (as described in the Vitest expect extend docs)
2. toHavePatched seems to be throwing Cannot read properties of undefined (reading 'callHistory'):

expect(fetchMock).toHavePatched({})

I'll create a repo for reproducing this tomorrow (didn't want to forget to call it out), but I haven't gotten it to work at all yet, so should be pretty easy to reproduce - or maybe I'm missing something?

[wheresrhys]

Thanks - a repo would be great, and I'l take a look in the next few days

[gonzalovilaseca]

Same happens with Jest by the way

[JHWelch]

I'm seeing this same thing when using any of the

expect(fetchMock).toHave{Verb}ed()

helpers. Is there some sort of setup beyond just running

fetchMock.mockGlobal().route(...)

that I'm missing?

[JHWelch]

I just dug into the code, and found that the functions are destructuring fetchMock out from the expected value.

fetch-mock/packages/vitest/src/vitest-extensions.ts

{
  toHaveFetched: (
    { fetchMock }: { fetchMock: FetchMock },
    filter: CallHistoryFilter,
    options: UserRouteConfig,
  ): SyncExpectationResult => { /* ... */ }
}

So I was able to get my code to work as expected only if I wrapped fetchMock in an object.

// importing as documentation describes.
import fetchMock, { manageFetchMockGlobally } from '@fetch-mock/vitest'

expect({ fetchMock }).toHaveFetched('/api/weeks/2020-01-01/rsvp')

This is now passing correctly.

[niemisami]

Any news about the types? I am still getting Types aren't being loaded when using TS, resulting in Property 'toHavePatched' does not exist on type 'Assertion<FetchMockVitest>'. Is there any step that docs aren't telling that I am missing?

[wheresrhys]

@niemisami Are you able to create a repo with a reduced test case that reproduces the issue?

[niemisami]

@wheresrhys Sure here's the demo https://stackblitz.com/edit/vitejs-vite-zjce3ifu?file=src%2Fapp.test.ts

Setup I did:

1. installed basic vite react+ts project
2. installed vitest, fetch-mock and @fetch-mock/vitest
3. added "test": "vitest" to package.json
4. added "vite.config.ts" to tsconfig.app.json
5. setup fetch-mock on src/setupTests.ts
6. added app.test.tsx with simple toHaveFetched test

Result is that tests "work" meaning that toHaveFetched is found as it should but test file shows an ts-error:
Property 'toHaveFetched' does not exist on type 'Assertion<{ fetchMock: FetchMockVitest; }>'.

Sure I'm missing some configuration but I tried to follow vite's and your steps.

Thank you for your time