Background

I decided to test my effects without using the Angular TestBed because this should be faster then using the entire TestBed when I only want to test the effect in isolation (https://ngrx.io/guide/effects/testing#setup-without-testbed). I am using Jest as test runner.

Repro-Steps

Consider this simplified, generic approach I used.

  it('should get data on success', () => {
    // Arrange.
    const sampleData = { ... }
    const serviceMock = {
      getMyData: jest.fn().mockReturnValue(of(sampleData)),
    };

    const actions$ = new Actions(
      of(loadData({ id: 42 })),
    );

    const effects = new MyEffects(actions$, serviceMock);

    // Act.
    effects.loadData$.subscribe(action => {
      // Assert.
      expect(action).toEqual(
        loadDataSuccess({ data: sampleData }),
      );
    });
  }));

What's the problem?

Unfortunately the test is green, however the coverage showed me that it is not executed properly. This is due to two problems:

• The jest.fn() call does not execute anything and is wrong. This is an error from my side.
• However, in this case we want to see that an error occurs and the test should fail.

How to fix it? What do change?

If the test itself was run inside of async, then we would know that actually the service's getMyData has never been called because of the wrong implementation of the mock.

The docs may propose to wrap the async test into the async method call like this:

  it('should get data on success', async(() => { ...

Side Note

The test itself can than be fixed by don't mocking out the call by jest, but letting it go through.

Instead of using this:

getMyData: jest.fn().mockReturnValue(of(sampleData)),

We must use this:

getMyData: jest.fn(() => of(sampleData)),

Other information:

I would be willing to submit a PR for the docs ❤️

[x] Yes (Assistance is provided if you need help submitting a pull request)
[ ] No