Jest/TypeScript – partial type mock

Consider these types:

interface IPet {
  breed: string;
  type: string;
  weightInKg: number;
}

interface IHuman {
  eyeColor: string;
  heightInCm: number;
  weightInKg: number;
  shoeSize: number;
  pet: IPet;
}

interface IPet {

breed: string;

type: string;

weightInKg: number;

}

interface IHuman {

eyeColor: string;

heightInCm: number;

weightInKg: number;

shoeSize: number;

pet: IPet;

}

Let’s say you are testing a component that fires off an API call to retrieve on object that should match IHuman. In your test you will want to create a mock version of this, – usually referred to as stub or a fixture. Let’s look at an example of how that might go:

import getHuman from "api/getHuman";
import { mocked } from "ts-jest/utils";

const mockHumanResponse = mocked(getHuman);

const mockPet = {
  breed: "tabby",
  type: "cat",
  weightInKg: 50,
}

const mockHuman = {
  eyeColor: "blue",
  heightInCm: 180,
  weightInKg: 100,
  shoeSize: 12,
  pet: mockPet,
};

mockHumanResponse.mockResolvedValue(mockHuman);

import getHuman from "api/getHuman";

import { mocked } from "ts-jest/utils";

const mockHumanResponse = mocked(getHuman);

const mockPet = {

breed: "tabby",

type: "cat",

weightInKg: 50,

}

const mockHuman = {

eyeColor: "blue",

heightInCm: 180,

weightInKg: 100,

shoeSize: 12,

pet: mockPet,

};

mockHumanResponse.mockResolvedValue(mockHuman);

This will run fine and be completely happy as we have all the correct typing in our mock object. Let’s consider a scenario in which the type is much more complex and we only really care about some of the values for our use case, or in this specific example let’s pretend that we want to check all the stats of a human, but don’t care if they have a pet.

Typescript is going to be angry at us, because pet is not a nullable and it wants to see that type exist. My own personal experience with this was when I was mocking Stripe objects in tests, some of the types were huge and I only wanted to stub the properties I needed, otherwise I would have been down the rabbit hole. Let’s see how we can do this:

type ITypeMock<T> = {
  [Property in keyof T]?: ITypeMock<T[Property]>;
};

function typeMock<T>(instance: ITypeMock<T>): T {
  return instance as any;
}

type ITypeMock<T> = {

[Property in keyof T]?: ITypeMock<T[Property]>;

};

function typeMock<T>(instance: ITypeMock<T>): T {

return instance as any;

}

These little helpers use generics to allow us to take a type, and enforce type safety only for keys that have been provided, keys that have been provided must match their specification, but if they have not been provided they will be ignored and will not cause an error.

import getHuman from "src/api/getHuman";
import { mocked } from "ts-jest/utils";
import { typeMock } from "src/utils";
import { IHuman } from "src/iterfaces";

const mockHumanResponse = mocked(getHuman);

// no pet needed, but all other typing enforced
const mockHuman = typeMock<IHuman>({
  eyeColor: "blue",
  heightInCm: 180,
  weightInKg: 100,
  shoeSize: 12,
});

mockHumanResponse.mockResolvedValue(mockHuman); // this is happy

import getHuman from "src/api/getHuman";

import { mocked } from "ts-jest/utils";

import { typeMock } from "src/utils";

import { IHuman } from "src/iterfaces";

const mockHumanResponse = mocked(getHuman);

// no pet needed, but all other typing enforced

const mockHuman = typeMock<IHuman>({

eyeColor: "blue",

heightInCm: 180,

weightInKg: 100,

shoeSize: 12,

});

mockHumanResponse.mockResolvedValue(mockHuman); // this is happy