Idea: Type-safe mocks registry

[eegli]

While I really like the idea proposed in #175, there are a few flaws to it (still, thanks for pushing this @liveFreeOrCode!).

Since mockInstances and _mockClasses are static on MVCObject, every child instance will have the same mixed-array containing itself and other children. There's no type-safety.

I thought that maybe we can have some kind of global mocks registry with type-safe getters per class that inherits from MVCObject. Consider the following example:

A simple jest implementation:

const jest_ = {
  fn() {
    return () => {
      // Jest stuff
      console.log("I'm a mock!");
    };
  }
};

A global mock registry (not exposed in the package):

const MOCKS_REGISTRY = new Map<string, any[]>();

The mocked classes:

class MVCObject {
  constructor() {
    const ctr = this.constructor;
    const existing = MOCKS_REGISTRY.get(ctr.name) || [];
    MOCKS_REGISTRY.set(ctr.name, [...existing, this]);
  }
  parentMethod = jest_.fn();
}

class GoogleMap extends MVCObject {
  mapMethod = jest_.fn();
}

class GoogleMarker extends MVCObject {
  markerMethod = jest_.fn();
}

Now every child class instantiation will have its unique key in the registry. The mock instances are exposed like so:

function getMockInstances<T extends { new (...args: any[]): {} }>(
  constructor: T
): InstanceType<T>[] {
  return MOCKS_REGISTRY.get(constructor.name) || [];
}

Usage:

new MVCObject();

new GoogleMap();
new GoogleMap();
new GoogleMap();

new GoogleMarker();

const mvcs = getMockInstances(MVCObject); // [MVCObject]
const maps = getMockInstances(GoogleMap); // [GoogleMap, GoogleMap, GoogleMap]
const markers = getMockInstances(GoogleMarker); //  [GoogleMarker]

mvcs[0].parentMethod(); // (property) MVCObject.parentMethod: () => void
maps[0].parentMethod(); // (property) MVCObject.parentMethod: () => void
markers[0].markerMethod(); // (property) GoogleMarker.markerMethod: () => void

Now all methods (inherited and own) are inferred correctly. Of course, it's still up to the users to decide if mock instances have been created (meaning that the length of the returned mocks array is larger than 0).

// Does not exist on google.maps
getMockInstances(class X {}); // []

I made a little sandbox to experiment: https://codesandbox.io/s/charming-wind-xyqfh?file=/src/index.ts

Let me know what you think. It's just an idea and maybe worth exploring.

[eegli]

Also: This would heavily facilitate cleanup between tests. We could expose some sort of resetMocks function that takes an arbitrary amount of mocked classes and cleans their entries in the registry.

function resetMocks<T extends { new (...args: any[]): {} }[]>(
  ...constructors: T
) {
  if (constructors.length) {
    for (const ctr of constructors) {
      MOCKS_REGISTRY.delete(ctr.name);
    }
  } else {
    MOCKS_REGISTRY.clear();
  }
}

Reset specific classes:

beforeEach(() => {
  resetMocks(Map_, Marker);
});

Reset all? Or maybe expose a specific function for that.

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

I did a quick POC and this test works with the suggested setup:

test("mockInstances available", () => {
  initialize();
  const map = new google.maps.Map(null);
  map.fitBounds(null);

  expect(getMockInstances(Map_)).toEqual([map]);
  expect(getMockInstances(Map_)[0].fitBounds).toHaveBeenCalledWith(null);

  new google.maps.Map(null);
  new google.maps.Marker();

  expect(getMockInstances(Map_)).toHaveLength(2);
  expect(getMockInstances(Marker)).toHaveLength(1);

  resetMocks(Map_, Marker);

  expect(getMockInstances(Map_)).toHaveLength(0);
  expect(getMockInstances(Marker)).toHaveLength(0);
});

If this is something you think makes sense, I made a draft for a possible implementation

[jpoehnelt]

Seems like it would be possible to maintain the automatic afterEach call? wdyt? (from the draft implementation above)

[jpoehnelt]

should also be able to maintain the _mockClasses and mockInstances behavior with a static getter to avoid breaking changes by just grabbing the instances from the registry.

I think idea is a worthwhile addition! 👍

[eegli]

I agree we should keep the _mockClasses and mockInstances getters (and everything else in order to avoid breaking stuff).

Considering the automatic afterEach call, I would probably leave it up to the users to decide when they want to clean up. After all, this addition will most probably be used only for a small portion of tests that care about what happens on the Map - something that likely does not apply to all tests in a project. And Jest - by default - also does not clear mock instances automatically and instead encourages, e.g. jest.clearAllMocks in afterEach.

I think it makes sense to clear mocks automatically whenever initialize() is called. I can only assume many users already call it in their test setup that is run before each test file.

What I'm still unsure about are potential race conditions when tests run in parallel and mocks are cleared. I'm not too familiar with Jest's internals. We could add a note to run test sequentially with maxWorkers: 1 if this happens but I'm going to check this.

[github-actions]

🎉 This issue has been resolved in version 2.4.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)
• v2.4.0

Your semantic-release bot 📦🚀