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,

Halette

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,

Halette

This probably prevents running the tests in IE11 though? Any idea how to archive this? – Sidewinder

Thanks so much Mr Kumar! Do you know whether this issue has been reported already? It would be great to be able to run those tests with ES5 as target. Cheers – Brooklynese

@Brooklynese Thank you. Sorry, no info on if this has been logged as a bug. – Halette

@ManishKumar I have created a discussion on the rxjs GitHub repo (github.com/ReactiveX/rxjs/discussions/5976). Feel free to visit it or add any comments if you think appropriate. Cheers – Brooklynese

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).

Sidewinder