Stack trace for error shows wrong place in code

[xaralis]

Issue

When testing, the captured stack trace for an error shows different part of spec file. The line numbers match the code as expected, but the trace shows a different piece of the file.

Expected behavior

The stack trace shows where the error actually really happened.

Test repo:

https://github.com/xaralis/ts-jest-433

Output from your debug log

[
  "Reading tsconfig file from path ./tsconfig.spec.json"
]
[
  "Original typescript config before modifications: ",
  {
    "baseUrl": "/Users/xaralis/Workspace/d21-web-platform/src",
    "declaration": false,
    "moduleResolution": 2,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "target": 1,
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ],
      "lodash": [
        "../node-modules/lodash"
      ],
      "ngx-toastr": [
        "../node-modules/ngx-toastr"
      ],
      "rxjs/*": [
        "../node-modules/rxjs/*"
      ]
    },
    "typeRoots": [
      "/Users/xaralis/Workspace/d21-web-platform/node_modules/@types"
    ],
    "lib": [
      "lib.es2017.d.ts",
      "lib.dom.d.ts"
    ],
    "strict": true,
    "plugins": [
      {
        "name": "@angular/language-service"
      }
    ],
    "inlineSourceMap": true,
    "inlineSources": true,
    "module": 1,
    "jsx": 2
  }
]
[
  "final compilerOptions:",
  {
    "baseUrl": "/Users/xaralis/Workspace/d21-web-platform/src",
    "declaration": false,
    "moduleResolution": 2,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "target": 1,
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ],
      "lodash": [
        "../node-modules/lodash"
      ],
      "ngx-toastr": [
        "../node-modules/ngx-toastr"
      ],
      "rxjs/*": [
        "../node-modules/rxjs/*"
      ]
    },
    "typeRoots": [
      "/Users/xaralis/Workspace/d21-web-platform/node_modules/@types"
    ],
    "lib": [
      "lib.es2017.d.ts",
      "lib.dom.d.ts"
    ],
    "strict": true,
    "plugins": [
      {
        "name": "@angular/language-service"
      }
    ],
    "inlineSourceMap": true,
    "inlineSources": true,
    "module": 1,
    "jsx": 2
  }
]
[
  "tsJestConfig: ",
  {
    "tsConfigFile": "./tsconfig.spec.json"
  }
]
[
  "Using babel with options:",
  {
    "babelrc": false,
    "plugins": [],
    "presets": []
  }
]

Test output

Summary of all failing tests
 FAIL  src/app/routes/proposal-admin/detail/status-toggle.component.spec.ts (18.717s)
  ● proposal-admin-detail-status-toggle › status notifs › should report APPROVED and provide change action when proposal is CONVERTED

    expect(received).not.toBeNull()

    Expected value not to be null, instead received
      null

      65 |         const getChangeActionBtn = () => fixture.debugElement.query(By.css(`.current-status .ui-link`));
      66 |         const isChangeActionAvailable = () => !! getChangeActionBtn();
    > 67 |         const areActionsAvailable = () => !! fixture.debugElement.query(By.css('.toggle-area:not(.hidden)'));
      68 |
      69 |         it('should report APPROVED and provide change action when proposal is CONVERTED', () => {
      70 |             setStatus(ProposalStatus.CONVERTED);

      at src/app/routes/proposal-admin/detail/status-toggle.component.spec.ts:67:56

Full test file

import { DebugElement, SimpleChange } from '@angular/core';
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

import { ProposalAdminModule } from '../proposal-admin.module';
import { ProposalAdminDetailStatusToggleComponent } from './status-toggle.component';
import { Proposal, ProposalStatus } from 'app/core/proposals';
import { SharedModule } from 'app/shared';
import { click, dispatchFakeEvent } from 'testing';
import { setUpTestBed } from 'testing/testbed';

describe.only('proposal-admin-detail-status-toggle', () => {
    let fixture: ComponentFixture<ProposalAdminDetailStatusToggleComponent>;
    let comp: ProposalAdminDetailStatusToggleComponent;
    let proposal: Proposal;

    setUpTestBed({
        imports: [
            ProposalAdminModule,
            SharedModule.forRoot(),
            NoopAnimationsModule,
        ]
    });

    beforeEach(() => {
        fixture = TestBed.createComponent(ProposalAdminDetailStatusToggleComponent);
        comp = fixture.debugElement.componentInstance;
        proposal = {
            _id: 'proposalid',
            title: 'proposal',
            slug: 'proposalid-proposal',
            status: ProposalStatus.PROPOSED,
            statusMessage: '',
            poll: 'poll',
            proposer: {
                name: 'proposer name',
                email: 'proposer@example.com',
                phone: '777888111',
            },
            perex: 'perex',
            budget: '$5000',
            createdAt: new Date(),
            updatedAt: new Date(),
        };
        comp.proposal = proposal;
        comp.proposableQuestions = [
            {_id: 'q1', i18n: {current: {question: 'q1'}}},
            {_id: 'q2', i18n: {current: {question: 'q2'}}},
        ] as any;
    });

    describe('status notifs', () => {
        const setStatus = (status: ProposalStatus) => {
            proposal.status = status;
            comp.ngOnChanges({
                proposal: new SimpleChange(undefined, comp.proposal, true),
                proposableQuestions: new SimpleChange(undefined, comp.proposableQuestions, true),
            });
            fixture.detectChanges();
        };
        const getStatusStatement = (cls: string) => {
            return fixture.debugElement.query(By.css(`.current-status .status-${cls}`));
        };
        const getChangeActionBtn = () => fixture.debugElement.query(By.css(`.current-status .ui-link`));
        const isChangeActionAvailable = () => !! getChangeActionBtn();
        const areActionsAvailable = () => !! fixture.debugElement.query(By.css('.toggle-area:not(.hidden)'));

        it('should report APPROVED and provide change action when proposal is CONVERTED', () => {
            setStatus(ProposalStatus.CONVERTED);
            expect(getStatusStatement('approved')).not.toBeNull();
            expect(isChangeActionAvailable()).toBeTruthy();
        });

    });

});

Line numbers are OK, but the stack trace area doesn't cover the place where the error actually happened.

[kulshekhar]

@xaralis Can you please create a minimal repo that reproduces this issue?

[xaralis]

@kulshekhar I'll try but I think that I know what causes it. At least it's definitely one of the problems.

import { NoopAnimationsModule } from '@angular/platform-browser/animations';

describe('test', () => {
    let someting = 'aaa';

    it('should fail', () => {
        expect(true).toBeFalsy();
    });
});

This reports:

 FAIL  src/app/routes/proposal-admin/detail/test.spec.ts
  ● test › should fail

    expect(received).toBeFalsy()

    Expected value to be falsy, instead received
      true

      4 |     let someting = 'aaa';
      5 |
    > 6 |     it('should fail', () => {
      7 |         expect(true).toBeFalsy();
      8 |     });
      9 | });

If I remove the import:

describe('test', () => {
    let someting = 'aaa';

    it('should fail', () => {
        expect(true).toBeFalsy();
    });
});

It shows the right line:

 FAIL  src/app/routes/proposal-admin/detail/test.spec.ts
  ● test › should fail

    expect(received).toBeFalsy()

    Expected value to be falsy, instead received
      true

      3 |
      4 |     it('should fail', () => {
    > 5 |         expect(true).toBeFalsy();
      6 |     });
      7 | });
      8 |

[xaralis]

@kulshekhar Here is the test repo: https://github.com/xaralis/ts-jest-433

[kulshekhar]

Just tested this and was able to replicate the issue.

@xaralis I'm not yet sure what's causing this but the import doesn't affect this issue one way or another. If the import is just commented out and the test run again, we get the following output:

 FAIL  src/app/test.spec.ts
  test
    ✕ should fail (18ms)

  ● test › should fail

    expect(received).toBeFalsy()
    
    Expected value to be falsy, instead received
      true

      3 | describe('test', () => {
      4 |     let someting = 'aaa';
    > 5 | 
      6 |     it('should fail', () => {
      7 |         expect(true).toBeFalsy();
      8 |     });
      
      at src/app/test.spec.ts:5:22

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        2.596s

[xaralis]

@kulshekhar Hmm, strange. Thanks for investigating.

[kulshekhar]

@xaralis The issue seems to be with the preset. If I remove the preset and update the jest config (PR to the test repo), I get the following result:

$ jest --no-cache
 FAIL  src/app/test.spec.ts
  test
    ✕ should fail (12ms)

  ● test › should fail

    expect(received).toBeFalsy()
    
    Expected value to be falsy, instead received
      true

       5 | 
       6 |     it('should fail', () => {
    >  7 |         expect(true).toBeFalsy();
       8 |     });
       9 | });
      10 | 
      
      at Object.<anonymous> (src/app/test.spec.ts:7:22)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        2.101s
Ran all test suites.
error Command failed with exit code 1.

[xaralis]

@kulshekhar Thank you very much, we can close this then. I will forward this to the preset author.

[xaralis]

Linking the issue for the record: thymikee/jest-preset-angular#121