Problem with typescript import

[Spiralis]

As a part of my build routine I call tsc --noEmit.

Earlier this printed nothing to my command-line.

I added jest-fetch-mock to my project, used a setupFile with global.fetch = require('jest-fetch-mock') as recommended.

If I dont add an import statement for the jest-fetch-mock in the typescript source test files where the jest-fetch-mock of fetch is used, then:

• jest runs the tests fine
• tsc complains that i.e. Property 'resetMocks' does not exist on type '(input?: string | Request, init?: RequestInit) => Promise<Response>'.

If I do add an import statement for the jest-fetch-mock in the typescript source test files where the jest-fetch-mock of fetch is used, then:

• jest runs the tests fine
• tsc complaints: node_modules/@types/jest/index.d.ts:34:15 - error TS2451: Cannot redeclare block-scoped variable 'expect'. plus many error messages after this (which I guess is caused for the same reason).

The only work-around I know for this is to add a const fetchAny = fetch as any; at the top of the source test-files where I want to use jest-fetch-mock, and use that object instead to do the testing. Which is not ideal. The whole purpose of the typescript types is to be able to benefit from the typings. Casting to any means that it becomes an ordinary object.

Has anyone encountered this and found any better solutions?

[amayun]

@Spiralis How do you import jest-fetch-mock ? I've tried to import it just like import from 'jest-fetch-mock'; And ran into all described troubles. And then I've tried

import fetch from 'jest-fetch-mock';
...
fetch.mockResponse(...)

And things go match better.

[dsebastien]

I've created a PR to improve the typings

[dsebastien]

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

[jefflau]

Closing now

[Mknight492]

I still appear to be having the same issue.

I'm using:

"jest": "^23.6.0",
"jest-fetch-mock": "^2.1.0",
"ts-jest": "^23.10.5",
"ts-loader": "^5.3.3",

with Tsconfig.json

{ "compilerOptions": { "baseUrl": "./source", "noImplicitAny": false, "noEmitOnError": true, "removeComments": false, "moduleResolution": "node", "module": "commonjs", "sourceMap": true, "target": "es2018", "jsx": "react", "lib": ["es2018", "dom"], "outDir": "./build", "strictNullChecks": true, "strict": true, "allowJs": false }, "exclude": ["bin", "node_modules", "wwwroot"], "include": ["source/*/", "source/test/testconfig.js"]

and jest.config.js

module.exports = { transform: { "^.+\.tsx?$": "ts-jest" }, testEnvironment: "nodejs", testRegex: "(/tests/.*|(\.|/)(test|spec))\.tsx?$", moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"], moduleNameMapper: { "\module.scss$": "identity-obj-proxy" }, setupFiles: [ "/source/test/testconfig.d.ts", "/source/test/setupJest.ts" ], setupTestFrameworkScriptFile: "/source/test/testconfig.ts", globals: { NODE_PATH: "source/" }, moduleDirectories: ["node_modules", "source/"], automock: false };

and this in setupJest.ts

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

const customGlobal: GlobalWithFetchMock = global as GlobalWithFetchMock; customGlobal.fetch = require("jest-fetch-mock"); customGlobal.fetchMock = customGlobal.fetch;

any thoughts on how to fix this?

[angelika]

I can confirm that I am also getting this issue, with 2.1.0, and that adding const fetchAny = fetch as any; is a workaround.

[Mknight492]

Presumably that will mean i have the swap all my fetch calls with fetchAny? I was hoping to using this with in some integration tests and that would be a lot of work.

On Fri, 18 Jan 2019, 21:29 Angelika Olsson <notifications@github.com wrote:

I can confirm that I am also getting this issue, with 2.1.0, and that adding const fetchAny = fetch as any; is a workaround.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/jefflau/jest-fetch-mock/issues/82#issuecomment-455465493, or mute the thread https://github.com/notifications/unsubscribe-auth/Al2dxcfdX6u4B9kNcOM5MbLIfaafZrn5ks5vEYXRgaJpZM4Vvh5p .

[livingmine]

I just want to share steps i've been through to setup jest-fetch-mock in Typescript for Node.js environment that might be related to this issue.

1. Follow the setup guide
2. Follow one of the example but instead of using fetch use fetchMock instead, for example instead of

   beforeEach(() => {
   fetch.resetMocks() // If fetch is used, typescript will emit the following error message: Property 'resetMocks' does not exist on type '{ (input: RequestInfo, init?: RequestInit): Promise<Response>; (input: RequestInfo, init?: RequestInit): Promise<Response>; }'
   })

   do this instead

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

   I'm not sure why the documentation uses fetch instead, i'd love someone to explain more about this subject.

3. Make sure to use a global fetch in your code. If yet another fetch library is used, make sure to import it as a polyfill! For example, when using cross-fetch library in the application code, use import 'cross-fetch/polyfill'; instead of import fetch from 'cross-fetch'; The rationale behind this is i guess because setupJest.ts is modifying the mocked global fetch to be available in the test files, while importing our own fetch will introduces a different fetch object which will not be mocked by jest.

Hope it helps! Cheers!

[snowl]

For anyone reading, instead of doing fetch as any, you can do:

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

const fetchMock = fetch as FetchMock;

and that still preserves the types while fixing the issue.

[yinzara]

You can also do add a "global.d.ts" file to the root of your repository with the text import "jest-fetch-mock". That should add the "fetchMock" variable to the global scope.

[jgirgis85]

I just want to share steps i've been through to setup jest-fetch-mock in Typescript for Node.js environment that might be related to this issue.

1. Follow the setup guide
2. Follow one of the example but instead of using fetch use fetchMock instead, for example instead of

beforeEach(() => {
    fetch.resetMocks() // If fetch is used, typescript will emit the following error message: Property 'resetMocks' does not exist on type '{ (input: RequestInfo, init?: RequestInit): Promise<Response>; (input: RequestInfo, init?: RequestInit): Promise<Response>; }'
})

do this instead

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

I'm not sure why the documentation uses fetch instead, i'd love someone to explain more about this subject.

3. Make sure to use a global fetch in your code. If yet another fetch library is used, make sure to import it as a polyfill! For example, when using cross-fetch library in the application code, use import 'cross-fetch/polyfill'; instead of import fetch from 'cross-fetch'; The rationale behind this is i guess because setupJest.ts is modifying the mocked global fetch to be available in the test files, while importing our own fetch will introduces a different fetch object which will not be mocked by jest.

Hope it helps! Cheers!

This comment is a life savior. Thanks