TypeError: fetch.resetMocks is not a function

[jjosef]

I'm using react-scripts 1.1.4, even tried updating to 2.0.0-next.3e165448, same deal.

Here's the code I'm using:

// setupTests.js
import fetchMock from 'jest-fetch-mock'
global.fetch = fetchMock

// test.js
import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'

const mockStore = configureMockStore([thunk])

import * as C from './types'
import * as actions from './actions'
import reducer from './reducer'

describe('mds actions', () => {
  beforeEach(() => {
    console.log(fetch)
    fetch.resetMocks()
  })

  it('should create a MDS_SET_SCORES', () => {
    expect(actions.setScores()).toEqual({
      type: C.MDS_SET_SCORES
    })
  })

I get the following errors:

  ● mds actions › should create a MDS_SET_SUMMARY

    TypeError: fetch.resetMocks is not a function

The log results are:

{ [Function: mockConstructor]
        _isMockFunction: true,
        getMockImplementation: [Function],
        mock: [Getter/Setter],
        mockClear: [Function],
        mockReset: [Function],
        mockReturnValueOnce: [Function],
        mockResolvedValueOnce: [Function],
        mockRejectedValueOnce: [Function],
        mockReturnValue: [Function],
        mockResolvedValue: [Function],
        mockRejectedValue: [Function],
        mockImplementationOnce: [Function],
        mockImplementation: [Function],
        mockReturnThis: [Function],
        mockName: [Function],
        getMockName: [Function],
        mockRestore: [Function],
        Headers: [Function: Headers],
        Response: [Function: ResponseWrapper],
        Request: [Function: Request],
        mockResponse: [Function],
        mockReject: [Function],
        mockResponseOnce: [Function: mockResponseOnce],
        once: [Function: mockResponseOnce],
        mockRejectOnce: [Function],
        mockResponses: [Function],
        resetMocks: [Function] }

Any help here is appreciated. Really like the design of this module but it does not seem to be working with create react app.

[jefflau]

Can you create a repo i can look at?

---

From: John Josef notifications@github.com Sent: Friday, August 10, 2018 9:26:00 PM To: jefflau/jest-fetch-mock Cc: Subscribed Subject: [jefflau/jest-fetch-mock] TypeError: fetch.resetMocks is not a function (#83)

I'm using react-scripts 1.1.4, even tried updating to 2.0.0-next.3e165448, same deal.

Here's the code I'm using:

// setupTests.js import fetchMock from 'jest-fetch-mock' global.fetch = fetchMock

// test.js import configureMockStore from 'redux-mock-store' import thunk from 'redux-thunk'

const mockStore = configureMockStore([thunk])

import as C from './types' import as actions from './actions' import reducer from './reducer'

describe('mds actions', () => { beforeEach(() => { console.log(fetch) fetch.resetMocks() })

it('should create a MDS_SET_SCORES', () => { expect(actions.setScores()).toEqual({ type: C.MDS_SET_SCORES }) })

I get the following errors:

● mds actions › should create a MDS_SET_SUMMARY

TypeError: fetch.resetMocks is not a function

The log results are:

{ [Function: mockConstructor] _isMockFunction: true, getMockImplementation: [Function], mock: [Getter/Setter], mockClear: [Function], mockReset: [Function], mockReturnValueOnce: [Function], mockResolvedValueOnce: [Function], mockRejectedValueOnce: [Function], mockReturnValue: [Function], mockResolvedValue: [Function], mockRejectedValue: [Function], mockImplementationOnce: [Function], mockImplementation: [Function], mockReturnThis: [Function], mockName: [Function], getMockName: [Function], mockRestore: [Function], Headers: [Function: Headers], Response: [Function: ResponseWrapper], Request: [Function: Request], mockResponse: [Function], mockReject: [Function], mockResponseOnce: [Function: mockResponseOnce], once: [Function: mockResponseOnce], mockRejectOnce: [Function], mockResponses: [Function], resetMocks: [Function] }

Any help here is appreciated. Really like the design of this module but it does not seem to be working with create react app.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://github.com/jefflau/jest-fetch-mock/issues/83, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ABKiFUPFEku7HQjxuWyPxDfH0l6oinj9ks5uPexYgaJpZM4V4xOQ.

[jjosef]

I'm not going to make a repo to help that. I may try to help figure out why it doesn't work including it in setupTests.js though. When I included it in the test file itself, it worked fine. So I'm guessing its something to do with how CRA/Jest allow mocks to be setup at run time.

[jefflau]

Ok let me know if you figure it out.

---

From: John Josef notifications@github.com Sent: Sunday, August 12, 2018 5:38:19 PM To: jefflau/jest-fetch-mock Cc: Jeff Lau; Comment Subject: Re: [jefflau/jest-fetch-mock] TypeError: fetch.resetMocks is not a function (#83)

I'm not going to make a repo to help that. I may try to help figure out why it doesn't work including it in setupTests.js though. When I included it in the test file itself, it worked fine. So I'm guessing its something to do with how CRA/Jest allow mocks to be setup at run time.

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/jefflau/jest-fetch-mock/issues/83#issuecomment-412355069, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ABKiFWT-ALMR-Sepz94BZChGSVR2nygXks5uQFn7gaJpZM4V4xOQ.

[ghjunior]

A workaround is to copy the type definitions from /src/index.d.ts into your own project, and cast fetch to the Fetch interface. So something like:

// jest-fetch-mock.d.ts
export interface MockParams {
    status?: number;
    statusText?: string;
    url?: string;
    headers?: Object;
}

export interface Fetch {
    (input?: string | Request, init?: RequestInit): Promise<Response>;
    mockResponse(body: string, init?: MockParams): Fetch;
    mockResponseOnce(body: string, init?: MockParams): Fetch;
    once(body: string, init?: MockParams): Fetch;
    mockResponses(...responses : Array<[string] | [string, MockParams]>): Fetch;
    mockReject(error?: Error): Fetch;
    mockRejectOnce(error?: Error): Fetch;
    resetMocks(): void;
}

And then somewhere in your tests:

import { Fetch } from './jest-fetch-mock';
const fetchMock = (fetch as Fetch);

beforeEach(() => {
    fetchMock.resetMocks();
});

[KarlisZ]

The workaround is fine, but we could really use an exported type directly from this module. Please add :)

[jefflau]

Welcome a PR. I won't be working on types for this library as I'm a complete Typescript noob!

[dsebastien]

This one should be closed now that #99 has been merged. My bad for not mentioning it in the commit message!

[herman-rogers]

Just a note for other people coming across this - the above PR #99 doesn't actually add fetchMock to the global scope so it'll return undefined. You'll need to add to your tests:

import {FetchMock} from "jest-fetch-mock";

const fetchMock = fetch as FetchMock;