How to allow partial TypeScript types when mocking functions - Jest, TypeScript

Question

I have a function which I would like to mock for testing purposes in TypeScript. In my tests, all I care about are the json and the status. However, when using Jest's jest.spyOn the type of my mocked function is set to return a http Response type. This is awkward as it means I have to manually go and implement a bunch of functions and properties that are irrelevant and arbitrary.

I suspect there is some way to use a partial type here to allow better and more useful mocking by overriding the return type to only that I care about. How would I go about doing this?

export function mockApi(json: object, status: number): void {
  jest.spyOn(
    myApiModule,
    'methodWhichReturnsAResponse'
  ).mockImplementation(() =>
    Promise.resolve({
      json: () => Promise.resolve(json),
      status,
      // Below here is to appease jest types (not needed for
      // testing purposes at the time of writing)
      headers: {
        has: (name: string) => true,
        // get, set, etc...
      },
      ok: true,
      redirected: false,
      // and about 10 other properties which exist on the Response type
      // ...
    }),
  );
}

Andre Pena · Accepted Answer · 2019-05-14 13:08:19Z

7

You can use as...

export function mockApi(json: object, status: number): void {
  jest.spyOn(
    myApiModule,
    'methodWhichReturnsAResponse'
  ).mockImplementation(() =>
    Promise.resolve({
      json: () => Promise.resolve(json),
      status
    } as http.Response), // <-- here
  );
}

The as keyword, used for typecasting, when used to convert a literal to type X, will allow you to define it only partially, but you still have type-checking because you cannot define props that don't exist.

Example:

type X {
  a: number
  b: number
}

const x = { a: 2 } as X // OK
const y = { a: 3, c: 2 } as X // NOT OK, because c does not exist in X

edited May 14, 2019 at 13:08

answered May 14, 2019 at 13:00

Andre Pena

59.7k53 gold badges213 silver badges257 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

James Mulholland Over a year ago

I was still getting an error when using as and was prompted to use an unknown type instead by the compiler. Perhaps I'm using a stricter tsconfig.json I'll post the solution I found from this below. Thank you for your help.

Andre Pena Over a year ago

That is really weird because unknown cannot be automatically converted to http.Response 🤔

Soullivaneuh Over a year ago

Should not be as Promise<http.Response> as the mock function is actually returning a promise?

cefn · Accepted Answer · 2022-08-30 20:24:36Z

2

I wrote the utility below which gives my codebase a partiallyMock<T>({}) call having property autocompletion for any type...

/** Simple mocking inspired by https://www.npmjs.com/package/jest-mock-extended
 * which has mockDeep<T>() for excellent autocompletion support but had other issues. */

/* atomic values (not made Partial when mocking) */
type Atomic = boolean | string | number | symbol | Date;

/** Mocks an indexed type (e.g. Object or Array), making it recursively Partial - note question mark  */
type PartialMockIndexed<T> = {
  [P in keyof T]?: PartialMock<T[P]>;
};

/** Mock any T */
export type PartialMock<T> = T extends Atomic ? T : PartialMockIndexed<T>;

/** Utility method for autocompleting a PartialMock<T> and returning it as a T */
export function partiallyMock<T>(mock: PartialMock<T>) {
  return mock as T;
}

/** Window is a special object, needs special mocking */
export function mockWindow(windowMock: PartialMock<typeof window>) {
  const origWindow = window;
  globalThis.window = Object.create(window);
  for (const [key, value] of Object.entries(windowMock)) {
    Object.defineProperty(globalThis.window, key, { value });
  }
  const unmockWindow = (globalThis.window = origWindow);
  return unmockWindow;
}

answered Aug 30, 2022 at 20:24

cefn

3,44625 silver badges38 bronze badges

1 Comment

Mauricio Piber Fão Over a year ago

I was getting bad time working with jest-mock-extended, it seems out of support or something like that, and your snippet help me a lot.

James Mulholland · Accepted Answer · 2019-05-14 13:14:14Z

1

I found a solution using the unknown type.

After trying and failing to use as to typecast immediately, I first cast the promise to unknown and then cast this value to the desired Response type like so:

    // ...
    .mockImplementation(() => {
      const httpResponsePromise = Promise.resolve({
        json: () => Promise.resolve(json),
        status,
      }) as unknown;
      return httpResponsePromise as Promise<Response>;
    });

answered May 14, 2019 at 13:14

James Mulholland

1,8922 gold badges17 silver badges23 bronze badges

Comments

hanneswidrig · Accepted Answer · 2022-11-01 18:41:22Z

0

Below is a TypeScript solution that is type-safe and allows partial return types for jest.mocked(...).

type GenericFunction = (...args: unknown[]) => unknown;
type GenericAsyncFunction = (...args: unknown[]) => Promise<unknown>;
type AwaitedReturnType<T extends GenericAsyncFunction> = Awaited<ReturnType<T>>;

type MockedFunc<T extends GenericFunction> = () => Partial<ReturnType<T>>;
type MockedFuncAsync<T extends GenericAsyncFunction> = () => Promise<Partial<AwaitedReturnType<T>>>;

export const partialMocked = <T extends MockedFunc<T>>(source: T) => jest.mocked<MockedFunc<T>>(source);
export const partialMockedAsync = <T extends MockedFuncAsync<T>>(source: T) => jest.mocked<MockedFuncAsync<T>>(source);

answered Nov 1, 2022 at 18:41

hanneswidrig

3651 gold badge3 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to allow partial TypeScript types when mocking functions - Jest, TypeScript

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related