How to test dynamic imports (then and catch) with Jest

Question

So I have been struggling with how to test dynamic imports generally and in this case, especially in jest, I have been reading a lot on the internet but did not find anything concrete, so I thought about bringing the question up to centralize a decent solution.

I have the following methods inside of a class

class MyClass {
   successMethod() {  ...  }

   errorMethod() { ... }

    myMethod() {
        return import('./myFile.js')
           .then(() => this.successMethod())
           .catch(() => this.errorMethod());
    }
}

My question is:

How do you mock both Success and Failing promise cases for this dynamic import using Jest to make sure each method (successMethod and errorMethod) are called when resolving or failing respectively?.

I found jest.doMock helps for mocking the resolved case but did not find a way to make the dynamic import fail by mocking it so the catch case is uncovered.

Note: this is not a react application, this is a Vanilla JS project.

Rawley

what about jest.mock('./myFile.js', () => Promise.reject(new Error('Forcing async import error')));? – Bowman

@DipenShah This will result in successful import with default export being promise object. – Haleakala

@EstusFlask yes and that should help you test fail scenario, right? Could you please share codesandbox/stablitz project, is should work afaik. – Bowman

@DipenShah jest.mock return is treated as CommonJS export which is translated to ESM default export. It will trigger then callback and not catch, because import returns a promise of ES module export object, which in this case is { default: Promise.reject(...) }. – Haleakala

Answer 1

Prototype methods can be spied or mocked on either MyClass.prototype or class instance. Module mocks and spy functions should be restored for each test in order for them to not affect each other.

let myClass;
beforeEach(() => {
  jest.resetModules();
  jest.restoreAllMocks();
  myClass = new MyClass();
  jest.spyOn(myClass, 'successMethod');
  jest.spyOn(myClass, 'errorMethod');
});

jest.doMock requires to import all affected modules after it was called. In order for dynamic import to result in rejected promise, myFile module should throw an error when evaluated. Since dynamic import returns a promise, tests should be asynchronous.

it('...', async () => {
  jest.mock('./myFile.js', () => 'value');
  await expect(myClass.myMethod()).resolves.toEqual(/* return value from successMethod */);
  expect(myClass.successMethod).toBeCalled();
  expect(myClass.errorMethod).not.toBeCalled();
});

it('...', async () => {
  jest.mock('./myFile.js', () => { throw new Error() });
  await expect(myClass.myMethod()).rejects.toThrow(/* error message from errorMethod */);
  expect(myClass.successMethod).not.toBeCalled();
  expect(myClass.errorMethod).toBeCalled();
});

Haleakala

I was already doing this but it wasn't working, now I found out that it is because I wasn't using jest.resetModules(); and jest.restoreAllMocks(); just to accept the answer could you change the error case to .rejects instead of .resolves. – Rawley

It should be resolves instead of rejects because of catch - unless it's errorMethod that causes a rejection. – Haleakala

Yes in my case the errot method causes a rejection. – Rawley

You can remove the comment about the discrepancies of the_ in the methods, I fixed it to make it easier to understand. – Rawley

Answer 2

maybe something like

beforeEach(() => {
  jest.resetModules();
});
beforeAll(() => {
  MyClass.mockImplementation(() => {
    return {
      successMethod: () => {
        console.log("succees");
      },
      errorMethod: () => {
        console.log("error");
      }
    };
  });
});

test("should fail", () => {
  jest.doMock("./myFile.js", () => {
    return jest.fn(() => {
      throw new Error("Parameter is not a number!");
    });
  });
  const kls = MyClass();
  kls.myMethod();
  expect(kls.errorMethod).toHaveBeenCalledTimes(1);
  expect(kls.successMethod).toHaveBeenCalledTimes(0);
});
test("should pass", () => {
  jest.doMock("./myFile.js", () => {
    return jest.fn(() => 1);
  });
  const kls = MyClass();
  kls.myMethod();
  expect(kls.errorMethod).toHaveBeenCalledTimes(0);
  expect(kls.successMethod).toHaveBeenCalledTimes(1);
});

Colubrine

The chosen approach is right but there are several problems here. MyClass is not a spy and cannot be mocked. Mocked implementation lacks original myMethod and there's nothing to test. myMethod is asynchronous and needs asynchronous tests. – Haleakala