"TypeError: Cannot call a class as a function" using hot/cold TestScheduler helpers

[Carlesgg97]

I am getting the following error when calling the "hot" helper provided by TestScheduler:

Chrome 88.0.4324.96 (Mac OS 10.15.7) test-marbles does not work FAILED
	TypeError: Cannot call a class as a function
	    at _classCallCheck (node_modules/@babel/runtime/helpers/esm/classCallCheck.js:3:1)
	    at new Subject (src/internal/Subject.ts:44:7)
	    at HotObservable._createSuperInternal (node_modules/@babel/runtime/helpers/esm/createSuper.js:12:1)
	    at new HotObservable (src/internal/testing/HotObservable.ts:23:5)
	    at TestScheduler.createHotObservable (src/internal/testing/TestScheduler.ts:76:21)
	    at src/app/marbles.spec.ts:7:26
	    at TestScheduler.run (src/internal/testing/TestScheduler.ts:391:19)
	    at UserContext.apply (src/app/marbles.spec.ts:6:13)
	    at ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:395:30)
	    at ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/zone-testing.js:300:43)
Chrome 88.0.4324.96 (Mac OS 10.15.7): Executed 4 of 4 (1 FAILED) (0.332 secs / 0.313 secs)

Using the "cold" helper also yields a similar error.

The issue seems to be related to the constructor calling super(). Could anyone please give me some indications on how to make this work? Is this a bug?

Steps to reproduce:

1. Create a new Angular application: npx @angular/cli@latest new test-app
2. IMPORTANT: Modify the tsconfig.spec.json file to add the "target": "es5" setting. With other targets (such as es2015 or es2020 the issue is not reproducible, however, I need to make this test work with the es5 setting.
3. Create a new spec file like the following:

src/app/marbles.spec.ts

import { TestScheduler } from 'rxjs/testing';

describe('test-marbles', () => {
	it('does not work', () => {
		const scheduler = new TestScheduler((actual, expected) => actual === expected);
		scheduler.run(({hot, expectObservable}) => {
			const hotObservable = hot('a', {a:1}); // this is the line causing the error

			expectObservable(hotObservable).toBe('a', {a:1});
		});
	});
});

4. Run npm test

Complete issue reproduction example can be found here: https://github.com/Carlesgg97/rxjs-testscheduler-issue-repro

Thank you.

[benlesh]

This sounds more like an issue with Babel output/configuration than RxJS. The call is totally valid, but it seems like whatever version of Babel you're on doesn't like calling super() inside of a constructor? I'm not sure why babel is even used, TBH.

[fasergeyte]

I ran into the same issue after migrating to Angular 12 from Angular 10. did anyone solved this issue?.

[scallacs]

I had the same issue, I've updated tsconfig target from "es5" to "es2015" ("compilerOptions.target" in tsconfig.json) and it now works.

[BastianGanze]

For anyone stumbling upon this error and pulling their hair out:
I had set the target everywhere to es2020 but the error would persist no matter what I did. After 4 hours of rebuilding the entire project I found that the culprit was our .browserslistrc which had IE-9-10 and IE11 as entries in it which made it so that it would always built with ES5 as target no matter what you put in your tsconfig. So maybe look if you have something similar in your project that lists the compatible browsers and selects polyfills for them.

[milanmajchrak]

I have this .browserslistrc file that is totally empty, and after deleting it, the errors are gone. Thank you!