Can't see TS typings for this library

[sadsa]

It seems the Typescript types are well defined for the fetch-mock library. However, I can't seem to find typings for this wrapper library anywhere. Could you please point me in the right direction?

[sadsa]

Also, any comparisons between this library and jest-fetch-mock would be much appreciated :)

[mdlawson]

I've just added the following declarations for now in my project, which seem to work fine though I'm not totally sure if they are correct:

declare module "fetch-mock-jest" {
  import { FetchMockStatic, MockCall, FetchMockSandbox } from "fetch-mock";

  interface FetchMockJestSandbox {
    sandbox(): jest.MockInstance<Response, MockCall> & FetchMockSandbox;
  }

  export type FetchMockJest = jest.MockInstance<Response, MockCall> &
    FetchMockJestSandbox &
    FetchMockStatic;

  const fetchMockJest: FetchMockJest;

  export default fetchMockJest;
}

declare namespace jest {
  import { InspectionFilter, InspectionOptions } from "fetch-mock";

  interface Matchers<R, T> {
    toHaveFetched(filter?: InspectionFilter, options?: InspectionOptions): R;
    toHaveLastFetched(
      filter?: InspectionFilter,
      options?: InspectionOptions
    ): R;
    toHaveNthFetched(
      n: number,
      filter?: InspectionFilter,
      options?: InspectionOptions
    ): R;
    toHaveFetchedTimes(
      times: number,
      filter?: InspectionFilter,
      options?: InspectionOptions
    ): R;
    toBeDone(filter?: InspectionFilter): R;
  }
}

Happy to work on a PR after I've battle tested them a little more.

[wheresrhys]

@mdlawson I don't know typescript very well, but the fetch-mock-jest api isn't very big, so you're probably pretty close. Could do with tslint tests for the PR though. Thanks for starting work on it.

@sadsa By comparisons you mean some sort of feature by feature comparison table?

[sadsa]

@wheresrhys - Well, I haven't had enough exposure to the library yet but from a quick visit to the documentation for this project, it's pretty lacking so far. It took me awhile to see that fetch-mock actually has quiet a full set of docs (http://www.wheresrhys.co.uk/fetch-mock/). Either a feature list at the top of the readme or a clear link through to the fetch-mock docs would be nice.

[sadsa]

@mdlawson - If you could make a PR for this, that would be awesome. Also, what version of Typescript are you using? as I see an Import declarations in a namespace cannot reference a module.ts(1147) error

[wheresrhys]

Thanks for the feedback - I'll try to make that clearer

[wheresrhys]

@sadsa Let me know what you think of the readme now

[alexb-uk]

FYI I used the following definitions to get this working on:

• "fetch-mock": "^9.2.1"
• "fetch-mock-jest": "^1.2.4"
• "jest": "^25.1.0"
• "ts-jest": "25.2.1"
• "typescript": "3.8.3"

/@types/fetch-mock-jest/index.d.ts:

declare module 'fetch-mock-jest' {
  import { FetchMockStatic, MockCall, FetchMockSandbox } from 'fetch-mock';
  interface FetchMockJestSandbox {
    sandbox(): jest.MockInstance<Response, MockCall> & FetchMockSandbox;
  }

  export type FetchMockJest = jest.MockInstance<Response, MockCall> & FetchMockJestSandbox & FetchMockStatic;

  const fetchMockJest: FetchMockJest;

  export default fetchMockJest;
}

/@types/global.d.ts:

import { InspectionFilter, InspectionOptions } from 'fetch-mock';

declare namespace jest {
  interface Matchers<R> {
    toHaveFetched(filter?: InspectionFilter, options?: InspectionOptions): R;
    toHaveLastFetched(filter?: InspectionFilter, options?: InspectionOptions): R;
    toHaveNthFetched(n: number, filter?: InspectionFilter, options?: InspectionOptions): R;
    toHaveFetchedTimes(times: number, filter?: InspectionFilter, options?: InspectionOptions): R;
    toBeDone(filter?: InspectionFilter): R;
  }
}

For reference my type roots are defined in tsconfig.json as:

"typeRoots": ["./src/@types", "node_modules/@types"]

you may need to adjust according to your project layout.

Once I've done some proper testing and if all goes to plan I'll put up a PR.

HTH

UPDATE: Although I thought this was working I'm getting weird errors when running the entire test suite vs a single test so something still not quite right.

[wheresrhys]

@alexb-uk Are you able to share any more information about those errors

[alexb-uk]

@alexb-uk Are you able to share any more information about those errors

Sorry got distracted and forgot to write an update. I fixed the test error but never managed to get import working. I was hoping the following would work but when you run the test it throws an undefined error:

import fetchMockJest from 'fetch-mock-jest';
const fetchMock = fetchMockJest.sandbox();

// Produces: TypeError: Cannot read property 'sandbox' of undefined

So I've switched back to require. At the very top of the test file before any import statements:

const fetchMock = require('fetch-mock-jest').sandbox();

jest.mock('node-fetch', () => {
  const nodeFetch = jest.requireActual('node-fetch');
  Object.assign(fetchMock.config, {
    fetch: nodeFetch,
  });
  return { ...nodeFetch, default: fetchMock };
});

This makes typings auto-complete in Webstorm IDE but are not working in the TypeScript compiler 😞

For example get() auto-completes with arg names and IDE warning of bad types BUT I would expect a TSXXXX error. Also incorrect properties are not flagged.

I have also switched from @types/global.d.ts to @types/jest.d.ts and declare global inside the file:

import { InspectionFilter, InspectionOptions } from 'fetch-mock';

declare global {
  namespace jest {
    interface Matchers<R> {
      toHaveFetched(filter?: InspectionFilter, options?: InspectionOptions): R;
      toHaveLastFetched(filter?: InspectionFilter, options?: InspectionOptions): R;
      toHaveNthFetched(n: number, filter?: InspectionFilter, options?: InspectionOptions): R;
      toHaveFetchedTimes(times: number, filter?: InspectionFilter, options?: InspectionOptions): R;
      toBeDone(filter?: InspectionFilter): R;
    }
  }
}

Give me a shout if I can shed any more light.

I'll have another go with a fresh head and see if I can get it working fully.

[wheresrhys]

Thanks for persevering. I wish I could help, but have next to zero knowledge of typescript

@grug Hello, and welcome to the jest wrapper. Having some trouble with types over here. I wonder if you're able to shed any light?

[tiljanssen]

Any progress on this issue?

[wheresrhys]

@tiljanssen @syffs @essensx I don't write typescript. I would really welcome a pull request to implement the types. If you have the time it'd be a great way to give back to open source

[skovhus]

I’ve made a pull request based on the types here and tested it on a few projects: #23

[wheresrhys]

🙌 @skovhus

[skovhus]

@wheresrhys when do you plan to make a new release on npm? I guess this issue should stay open until it has been released. :)

[wheresrhys]

failing build - will debug now

[wheresrhys]

Released as 1.5.1

[diminutivesloop]

It would help if the TypeScript setup was documented now that it's supported. This is what I was able to figure out on my own:

const fetchMock: typeof fetchMockJest = require('isomorphic-fetch')