Angular 10 | ngrx Effects | Unit Tests | Cannot call a class as a function

Question

After upgrading the Angular project to Angular 10, ngRx effects unit tests started breaking. Following is the error after upgrade:

Running into the same issue, Follow the solution.

Thanks,

Answer 1

Hopefully, this can be useful to someone someday.

After multiple hours of debugging and search found the root cause of the issue.

The issue occurs when the targetis set to ES5 in tsconfig.base.json.

By default, Angular 10 get scaffolded with the setting as ES2015 with which it works fine. But, that solution will not work for legacy browsers ie. IE11.

How do we set the target to ES5, so that project runs in IE and also the unit tests get passed?

Well, the solution was very simple.

Simply set the target setting in tsconfig.spec.json to ES2015 (defined below), without changing any configuration in base tsconfig. That worked like charm for me and the project gets compiled builder with ES5 settings and unit tests run fine with ES2015 setting.

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": ["jasmine"],
    "target": "ES2015"
  },
  "files": ["src/test.ts", "src/polyfills.ts"],
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

Output:

Happy coding and debugging :-)

Thanks,

Answer 2

In my project this was caused by using TestScheduler.run - so changing

it('should test some observable', () => {
    const scheduler = new TestScheduler((actual, expected) => expect(actual).toEqual(expected));
    scheduler.run(helpers => {
        const testObservable$ = getYourTestObservable();
        helpers.expectObservable(testObservable$).toBe('(a)', {a: 'some value'});
    });
});

to

it('should test some observable', fakeAsync(() => {
    const testObservable$ = getYourTestObservable();
    expect(testObservable$).toBeObservable(cold('(a)', {a: 'some value'}));
}));

resolved this (without altering the compile target).