Stack trace for error shows wrong place in code

[xaralis]

I've first thought this is issue with ts-jest but was proven wrong. The preset is responsible as found out in kulshekhar/ts-jest#433.

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: '[email protected]',
                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.

[thymikee]

You probably hit this: jestjs/jest#5496
Wait for next patch release, and let me know if that helps

[xaralis]

@thymikee Thanks! Will do.

[dgsmith2]

@xaralis, was this issue resolved for you? I seem to be encountering this with [email protected].

[thymikee]

@xaralis 22.3.0 doesn't have it yet, will be in 22.4 or so

[xaralis]

Yep, we didn't yet have a chance to try it. Waiting patiently.

[thymikee]

22.4.0 is released!

[xaralis]

For the record, I confirm that [email protected] fixes the issue. Thanks @thymikee