Angular-builders: Jest Builder: Tests fail when using a custom file name for the setupTestFrameworkScriptFile

[hoefling]

When trying to use a custom setup file name, all tests fail. When the option is omitted, the tests run fine.

Disclaimer

Not sure whether it's a bug or I'm using the option wrong. In any case, I'd be grateful for any help!

To reproduce

$ git clone https://github.com/hoefling/jest-builder-issue
$ cd jest-builder-issue
$ yarn

(this project is basically just ng new with adjustments following the builder docs, plus a custom setup script src/jest-setup.ts).

Running the tests yields

$ ng test
 FAIL  src/app/app.component.spec.ts
  AppComponent
    ✕ should create the app (33ms)
    ✕ should have as title 'myapp'
    ✕ should render title in a h1 tag (1ms)

  ● AppComponent › should create the app

    Failed: "Zone is needed for the async() test helper but could not be found. Please make sure that your environment includes zone.js/dist/zone.js"

      3 | 
      4 | describe('AppComponent', () => {
    > 5 |   beforeEach(async(() => {
        |   ^
      6 |     TestBed.configureTestingModule({
      7 |       declarations: [
      8 |         AppComponent

      at Env.beforeEach (node_modules/jest-jasmine2/build/jasmine_async.js:55:24)
      at Suite.<anonymous> (src/app/app.component.spec.ts:5:3)
      at Object.<anonymous> (src/app/app.component.spec.ts:4:1)

  ● AppComponent › should create the app

    TypeError: Cannot read property 'getComponentFromError' of null

      12 | 
      13 |   it('should create the app', () => {
    > 14 |     const fixture = TestBed.createComponent(AppComponent);
         |                             ^
      15 |     const app = fixture.debugElement.componentInstance;
      16 |     expect(app).toBeTruthy();
      17 |   });

      at TestBedViewEngine.Object.<anonymous>.TestBedViewEngine._initIfNeeded (node_modules/@angular/core/bundles/npm_package.esm5/packages/packages/core/testing/src/test_bed.ts:393:46)
      at Object.<anonymous> (src/app/app.component.spec.ts:14:29)

  ● AppComponent › should have as title 'myapp'

    Failed: "Zone is needed for the async() test helper but could not be found. Please make sure that your environment includes zone.js/dist/zone.js"

      3 | 
      4 | describe('AppComponent', () => {
    > 5 |   beforeEach(async(() => {
        |   ^
      6 |     TestBed.configureTestingModule({
      7 |       declarations: [
      8 |         AppComponent

      at Env.beforeEach (node_modules/jest-jasmine2/build/jasmine_async.js:55:24)
      at Suite.<anonymous> (src/app/app.component.spec.ts:5:3)
      at Object.<anonymous> (src/app/app.component.spec.ts:4:1)

  ● AppComponent › should have as title 'myapp'

    TypeError: Cannot read property 'getComponentFromError' of null

      18 | 
      19 |   it(`should have as title 'myapp'`, () => {
    > 20 |     const fixture = TestBed.createComponent(AppComponent);
         |                             ^
      21 |     const app = fixture.debugElement.componentInstance;
      22 |     expect(app.title).toEqual('myapp');
      23 |   });

      at TestBedViewEngine.Object.<anonymous>.TestBedViewEngine._initIfNeeded (node_modules/@angular/core/bundles/npm_package.esm5/packages/packages/core/testing/src/test_bed.ts:393:46)
      at Object.<anonymous> (src/app/app.component.spec.ts:20:29)

  ● AppComponent › should render title in a h1 tag

    Failed: "Zone is needed for the async() test helper but could not be found. Please make sure that your environment includes zone.js/dist/zone.js"

      3 | 
      4 | describe('AppComponent', () => {
    > 5 |   beforeEach(async(() => {
        |   ^
      6 |     TestBed.configureTestingModule({
      7 |       declarations: [
      8 |         AppComponent

      at Env.beforeEach (node_modules/jest-jasmine2/build/jasmine_async.js:55:24)
      at Suite.<anonymous> (src/app/app.component.spec.ts:5:3)
      at Object.<anonymous> (src/app/app.component.spec.ts:4:1)

  ● AppComponent › should render title in a h1 tag

    TypeError: Cannot read property 'getComponentFromError' of null

      24 | 
      25 |   it('should render title in a h1 tag', () => {
    > 26 |     const fixture = TestBed.createComponent(AppComponent);
         |                             ^
      27 |     fixture.detectChanges();
      28 |     const compiled = fixture.debugElement.nativeElement;
      29 |     expect(compiled.querySelector('h1').textContent).toContain('Welcome to myapp!');

      at TestBedViewEngine.Object.<anonymous>.TestBedViewEngine._initIfNeeded (node_modules/@angular/core/bundles/npm_package.esm5/packages/packages/core/testing/src/test_bed.ts:393:46)
      at Object.<anonymous> (src/app/app.component.spec.ts:26:29)

  console.log src/jest-setup.ts:1
    hello angular and jest

Test Suites: 1 failed, 1 total
Tests:       3 failed, 3 total
Snapshots:   0 total
Time:        1.203s
Ran all test suites.

Now remove the setupTestFrameworkScriptFile setting and rerun the tests:

$ sed -i '/setupTestFrameworkScriptFile/d' angular.json 
ng test
 PASS  src/app/app.component.spec.ts
  AppComponent
    ✓ should create the app (70ms)
    ✓ should have as title 'myapp' (26ms)
    ✓ should render title in a h1 tag (19ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        1.516s
Ran all test suites.

Builder

yarn list --pattern @angular-builders/jest
yarn list v1.12.3
└─ @angular-builders/[email protected]
Done in 0.60s.

Libraries

$ yarn list --pattern @angular-devkit/build-angular
yarn list v1.12.3
└─ @angular-devkit/[email protected]
Done in 0.61s.

[just-jeb]

Yep, that's an issue, thanks for reporting, I need to handle this.
I happens because under the hood Jest builder uses this option to setup things to work with Angular and if you override it, well, the things won't get set up.

As a workaround you can either:

1. Require "node_modules/@angular-builders/jest/src/jest-config/setup.js" in your jest-setup.ts.
2. Define your jest-setup.ts in accordance with jest-preset-angular instructions.

I'd suggest you to go with option 1 as it's much more transparent and once I fix this behavior you'll have to just remove the import.

[hoefling]

Nice! The import workaround worked like a charm. Other than that, thank you for this great addition to the project! Jest, paired with the Jest builder and the @jest-runner/electron is so far superior to Karma for running unit tests in an Angular+Electron project. I could throw out lots of ugly workarounds for pairing Karma with Node lib, it's just working now! Awesome!

[just-jeb]

Since 7.4.0 you can use setupFilesAfterEnv in your Jest config.