'ng test' fails when test assigns props to 'this'

[jakkn]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [ ] build
- [ ] serve
- [x] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Yes, the previous version in which this bug was not present was: 7.2.15

Description

Tests fail to complete when assigning properties to `this`.

The Jasmine documentation under https://jasmine.github.io/tutorials/your_first_suite explains the usage of this as follows:

The this keyword
Another way to share variables between a beforeEach, it, and afterEach is through the this keyword. Each spec's beforeEach/it/afterEach has the this as the same empty object that is set back to empty for the next spec's beforeEach/it/afterEach.

describe("A spec", function() {
  beforeEach(function() {
    this.foo = 0;
  });

  it("can use the `this` to share state", function() {
    expect(this.foo).toEqual(0);
    this.bar = "test pollution?";
  });

  it("prevents test pollution by having an empty `this` created for the next spec", function() {
    expect(this.foo).toEqual(0);
    expect(this.bar).toBe(undefined);
  });
});

When I include this references in my test suite the tests fail with

Failed: Cannot set property 'foo' of undefined

🔬 Minimal Reproduction

• Assign something to this in any test
• Run ng test

Should be fairly simple to reproduce, but in case example is necessary a reproduction of the issue is hosted at https://github.com/jakkn/angular8-cli-ng-test-this-bug-repro

🔥 Exception or Error

Chrome 74.0.3729 (Linux 0.0.0) AppComponent should create the app FAILED
	Failed: Cannot set property 'foo' of undefined
	    at 
	    at UserContext. (src/app/app.component.spec.ts:6:13)
	    at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:359:1)
	    at AsyncTestZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.AsyncTestZoneSpec.onInvoke (node_modules/zone.js/dist/zone-testing.js:770:1)
	    at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/zone-testing.js:305:1)
	    at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:358:1)
	    at Zone.runGuarded (node_modules/zone.js/dist/zone-evergreen.js:134:1)
	    at runInTestZone (node_modules/zone.js/dist/zone-testing.js:898:1)
	    at UserContext. (node_modules/zone.js/dist/zone-testing.js:832:1)
	    at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:359:1)
	    at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/zone-testing.js:308:1)
	Error: Illegal state: Could not load the summary for directive AppComponent.
	error properties: Object({ ngSyntaxError: true })
	    at syntaxError (node_modules/@angular/compiler/fesm2015/compiler.js:2175:1)
	    at CompileMetadataResolver.getDirectiveSummary (node_modules/@angular/compiler/fesm2015/compiler.js:19492:1)
	    at JitCompiler.getComponentFactory (node_modules/@angular/compiler/fesm2015/compiler.js:25291:1)
	    at CompilerImpl.getComponentFactory (node_modules/@angular/platform-browser-dynamic/fesm2015/platform-browser-dynamic.js:263:30)
	    at TestingCompilerImpl.getComponentFactory (node_modules/@angular/platform-browser-dynamic/fesm2015/testing.js:148:1)
	    at TestBedViewEngine.createComponent (node_modules/@angular/core/fesm2015/testing.js:3386:1)
	    at Function.createComponent (node_modules/@angular/core/fesm2015/testing.js:2968:1)
	    at UserContext. (src/app/app.component.spec.ts:15:29)
	    at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:359:1)
	    at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/zone-testing.js:308:1)

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.0.2
Node: 12.3.1
OS: linux x64
Angular: 8.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.2
@angular-devkit/build-angular     0.800.2
@angular-devkit/build-optimizer   0.800.2
@angular-devkit/build-webpack     0.800.2
@angular-devkit/core              8.0.2
@angular-devkit/schematics        8.0.2
@angular/cli                      8.0.2
@ngtools/webpack                  8.0.2
@schematics/angular               8.0.2
@schematics/update                0.800.2
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

Anything else relevant?

Downgrading to angular 7 makes tests pass so environment appears to be irrelevant. Issue reproduced on two machines running OSes:

• Linux 4.15.0-50-generic Typings files not picked up #54-Ubuntu x86_64 GNU/Linux
• Windows 10

[alan-agius4]

Hi, thanks for opening this however this is expected since with ES6 modules this is always undefined.

Also with the above syntax you might end up with with false positives/negatives if tests run in parallel because this in your case refers to the window object which will shared among various tests and not scoped within a spec.

What I'd recommend is running the below pattern;

describe("A spec", () => {
  let foo = 0;
  beforeEach(() => {
    foo = 0;
  });

  it("can use the `this` to share state", () => {
    expect(foo).toEqual(0);
  });

  it("prevents test pollution by having an empty `this` created for the next spec", () => {
    expect(foo).toEqual(0);
  });
});

[jakkn]

Thank you for your response, @alan-agius4. Rewriting the test suite to follow the above pattern is too expensive, but I was able to get the old behavior by compiling to commonjs module system.

tsconfig.spec.json modified accordingly

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "module": "commonjs"
  }
}

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}