Coverage/error indicators are misaligned

[wilgert]

Issue description or question

In one of my projects the coverage/error indicators are showing up on the wrong line. I've tried clearing the jest cache (using jest --clearCache) to no avail.

Wallaby diagnostics report

{ editorVersion: 'WebStorm 2020.1.1',
  pluginVersion: '1.0.176',
  editorType: 'IntelliJ',
  osVersion: 'darwin 19.4.0',
  nodeVersion: 'v10.19.0',
  coreVersion: '1.0.902',
  config:
   { diagnostics: {},
     testFramework: { version: 'jest@24.8.0', configurator: 'jest@24.8.0', reporter: 'jest@24.8.0', starter: 'jest@24.8.0', autoDetected: true },
     filesWithCoverageCalculated: [ 'src/**/*.ts', '!src/**/*.spec.ts', '!src/**/index.ts', '!src/environment/**', '!src/**/*.mock.ts', '!src/mocks/**', '!src/**/*.d.ts' ],
     globalSetup: false,
     micromatch: true,
     files:
      [ { pattern: '/node_modules/', regexp: /\/node_modules\//, ignore: true, trigger: true, load: true },
        { pattern: 'dist/|build/|coverage/|/\\.cache/|/\\.idea/|/\\.vscode/|/\\.git/|/\\.gitlab/',
          regexp: /dist\/|build\/|coverage\/|\/\.cache\/|\/\.idea\/|\/\.vscode\/|\/\.git\/|\/\.gitlab\//,
          ignore: true,
          trigger: true,
          load: true },
        { pattern: '/dist/', regexp: /\/dist\//, ignore: true, trigger: true, load: true },
        { pattern: 'src/app/*.{js}', regexp: /src\/app\/*.{js}/, ignore: true, trigger: true, load: true },
        { pattern: '**/**', ignore: false, trigger: true, load: true, order: 1 },
        { pattern: '(/__tests__/.*|\\.(test|spec))\\.(ts|js)$', regexp: /(\/__tests__\/.*|\.(test|spec))\.(ts|js)$/, ignore: true, trigger: true, load: true } ],
     tests:
      [ { pattern: '/node_modules/', regexp: /\/node_modules\//, ignore: true, trigger: true, load: true, test: true },
        { pattern: 'dist/|build/|coverage/|/\\.cache/|/\\.idea/|/\\.vscode/|/\\.git/|/\\.gitlab/',
          regexp: /dist\/|build\/|coverage\/|\/\.cache\/|\/\.idea\/|\/\.vscode\/|\/\.git\/|\/\.gitlab\//,
          ignore: true,
          trigger: true,
          load: true,
          test: true },
        { pattern: '/dist/', regexp: /\/dist\//, ignore: true, trigger: true, load: true, test: true },
        { pattern: 'src/app/*.{js}', regexp: /src\/app\/*.{js}/, ignore: true, trigger: true, load: true, test: true },
        { pattern: '(/__tests__/.*|\\.(test|spec))\\.(ts|js)$', regexp: /(\/__tests__\/.*|\.(test|spec))\.(ts|js)$/, ignore: false, trigger: true, load: true, test: true, order: 2 } ],
     filesWithNoCoverageCalculated: [],
     runAllTestsInAffectedTestFile: false,
     updateNoMoreThanOneSnapshotPerTestFileRun: false,
     compilers: {},
     preprocessors: {},
     maxConsoleMessagesPerTest: 100,
     autoConsoleLog: true,
     delays: { run: 0, edit: 100, update: 0 },
     workers: { initial: 0, regular: 0, recycle: false },
     teardown: undefined,
     hints:
      { ignoreCoverage: '__REGEXP /ignore coverage|istanbul ignore/',
        ignoreCoverageForFile: '__REGEXP /ignore file coverage/',
        commentAutoLog: '?',
        testFileSelection: { include: '__REGEXP /file\\.only/', exclude: '__REGEXP /file\\.skip/' } },
     automaticTestFileSelection: true,
     runSelectedTestsOnly: false,
     extensions: {},
     env: { type: 'node', params: {}, runner: '<homeDir>/.nvm/versions/node/v10.19.0/bin/node', viewportSize: { width: 800, height: 600 }, options: { width: 800, height: 600 }, bundle: true },
     reportUnhandledPromises: true,
     slowTestThreshold: 75,
     lowCoverageThreshold: 80,
     loose: true,
     configCode: 'auto.detect#919458815' },
  packageJSON:
   { dependencies:
      { '@angular/animations': '^9.1.0',
        '@angular/cdk': '^9.2.0',
        '@angular/common': '^9.1.0',
        '@angular/compiler': '^9.1.0',
        '@angular/core': '^9.1.0',
        '@angular/flex-layout': '^9.0.0-beta.29',
        '@angular/forms': '^9.1.0',
        '@angular/material': '^9.2.0',
        '@angular/platform-browser': '^9.1.0',
        '@angular/platform-browser-dynamic': '^9.1.0',
        '@angular/router': '^9.1.0',
        '@ngrx/effects': '^9.0.0',
        '@ngrx/router-store': '^9.0.0',
        '@ngrx/store': '^9.0.0',
        '@ngx-pwa/local-storage': '^9.0.3',
        '@ngx-translate/core': '^11.0.1',
        'angular2-notifications': '^3.0.0',
        'applicationinsights-js': '1.0.20',
        'babel-loader': '8.0.5',
        'core-js': '2.6.2',
        'date-fns': '2.0.0-alpha.7',
        iban: '0.0.11',
        jsvat: '^2.2.0',
        'node-sass': '^4.13.1',
        rxjs: '^6.5.4',
        tslib: '^1.10.0' },
     devDependencies:
      { '@angular-devkit/build-angular': '~0.901.0',
        '@angular-devkit/core': '^9.1.0',
        '@angular-devkit/schematics': '^9.1.0',
        '@angular/cli': '^9.1.0',
        '@angular/compiler-cli': '^9.1.0',
        '@angular/language-service': '^9.1.0',
        '@babel/core': '7.2.2',
        '@compodoc/compodoc': '^1.1.10',
        '@ngrx/schematics': '9.0.0',
        '@ngrx/store-devtools': '9.0.0',
        '@storybook/addon-actions': '5.2.0',
        '@storybook/addon-jest': '5.2.0',
        '@storybook/addon-knobs': '5.2.0',
        '@storybook/addon-links': '5.2.0',
        '@storybook/addon-notes': '5.2.0',
        '@storybook/addon-options': '5.2.0',
        '@storybook/addon-storysource': '5.2.0',
        '@storybook/addons': '5.2.0',
        '@storybook/angular': '5.2.0',
        '@types/applicationinsights-js': '1.0.9',
        '@types/faker': '4.1.5',
        '@types/jest': '23.3.13',
        '@types/node': '^12.11.1',
        '@types/react': '16.9.2',
        'angular2-template-loader': '0.6.2',
        'angular2-uuid': '1.1.1',
        autoprefixer: '^8.1.0',
        'babel-core': '6.26.3',
        'babel-jest': '^25.1.0',
        codelyzer: '^5.1.2',
        commitizen: '^3.0.7',
        connect: '3.6.6',
        cypress: '^3.8.3',
        'cz-conventional-changelog': '2.1.0',
        electron: '4.0.1',
        faker: '4.1.0',
        husky: '^4.2.3',
        'increase-memory-limit': '1.0.6',
        jest: '^25.1.0',
        'jest-junit': '^10.0.0',
        'jest-preset-angular': '7.1.1',
        'lint-staged': '8.1.0',
        mocha: '5.2.0',
        'ng-apimock': '^1.4.9',
        'ng2-mock-component': '0.1.1',
        'npm-run-all': '4.1.5',
        prettier: '1.16.0',
        'pretty-quick': '1.10.0',
        protractor: '^5.4.2',
        renamer: '^1.1.1',
        'rxjs-tslint-rules': '4.15.0',
        'standard-version': '^7.1.0',
        'svg-sprite': '1.5.0',
        'to-string-loader': '1.1.5',
        'ts-helpers': '1.1.2',
        'ts-node': '7.0.1',
        tslint: '5.12.1',
        'tslint-config-airbnb': '5.11.1',
        'tslint-config-prettier': '1.17.0',
        'tslint-consistent-codestyle': '1.15.0',
        'tslint-eslint-rules': '5.4.0',
        typescript: '^3.7.5',
        'validate-commit-message': '3.0.1',
        'wait-on': '3.2.0',
        watch: '1.0.2',
        'zone.js': '~0.10.2' } },
  fs: { numberOfFiles: 2655 },
  debug:
   [ '2020-06-02T09:35:29.744Z config Detected Jest.\n',
     '2020-06-02T09:35:29.746Z config Configured Jest.\n',
     '2020-06-02T09:35:29.749Z project Wallaby Node version: v10.19.0\n',
     '2020-06-02T09:35:29.749Z project Wallaby config: <homeDir>/Projects/***/***/auto.detect\n',
     '2020-06-02T09:35:32.283Z project File cache: <homeDir>/Library/Caches/JetBrains/WebStorm2020.1/wallaby/projects/1d86b6ed05ac339b\n',
     '2020-06-02T09:35:32.292Z uiService Listening port 51235\n',
     '2020-06-02T09:35:32.354Z project package.json file change detected, invalidating local cache\n',
     '2020-06-02T09:35:32.446Z workers Parallelism for initial run: 6, for regular run: 3\n',
     '2020-06-02T09:35:32.446Z workers Starting run worker instance #0\n',
     '2020-06-02T09:35:32.446Z workers Starting run worker instance #1\n',
     '2020-06-02T09:35:32.446Z workers Starting run worker instance #2\n',
     '2020-06-02T09:35:32.446Z workers Starting run worker instance #3\n',
     '2020-06-02T09:35:32.446Z workers Starting run worker instance #4\n',
     '2020-06-02T09:35:32.446Z workers Starting run worker instance #5\n',
     '2020-06-02T09:35:32.447Z workers Web server is listening at 49241\n',
     '2020-06-02T09:35:32.447Z project File cache requires some updates, waiting required files from IDE\n',
     '2020-06-02T09:35:33.033Z workers Started run worker instance (delayed) #1\n',
     '2020-06-02T09:35:33.034Z workers Started run worker instance (delayed) #0\n',
     '2020-06-02T09:35:33.035Z workers Started run worker instance (delayed) #2\n',
     '2020-06-02T09:35:33.035Z workers Started run worker instance (delayed) #3\n',
     '2020-06-02T09:35:33.035Z workers Started run worker instance (delayed) #4\n',
     '2020-06-02T09:35:33.048Z workers Started run worker instance (delayed) #5\n',
     '2020-06-02T09:35:33.053Z project Stopping process pool\n',
     '2020-06-02T09:35:33.055Z project Test run started; run priority: 3\n',
     '2020-06-02T09:35:33.071Z project Running all tests\n',
     '2020-06-02T09:35:33.111Z workers Starting test run, priority: 3\n',
     '2020-06-02T09:35:33.112Z nodeRunner Starting sandbox [worker #0, session #cou8r]\n',
     '2020-06-02T09:35:33.112Z nodeRunner Preparing sandbox [worker #0, session #cou8r]\n',
     '2020-06-02T09:35:33.112Z nodeRunner Prepared sandbox [worker #0, session #cou8r]\n',
     '2020-06-02T09:35:33.112Z workers [worker #0, session #cou8r] Running tests in sandbox\n',
     '2020-06-02T09:35:48.838Z workers [cou8r] Loaded unknown number of test(s)\n',
     '2020-06-02T09:35:48.838Z workers [cou8r] Test executed: should init\n',
     '2020-06-02T09:35:48.839Z workers [cou8r] Test executed: should update meter readings updateOrderCorrectionMeterReading\n',
     '2020-06-02T09:35:48.839Z workers [cou8r] Test executed: should handle error\n',
     '2020-06-02T09:35:48.842Z workers [cou8r] Run 3 test(s), skipped 0 test(s)\n',
     '2020-06-02T09:35:48.844Z workers [cou8r] Sandbox is responsive, closing it\n',
     '2020-06-02T09:35:48.845Z project Test run finished\n',
     '2020-06-02T09:35:48.846Z project Processed console.log entries\n',
     '2020-06-02T09:35:48.846Z project Processed loading sequences\n',
     '2020-06-02T09:35:48.846Z project Processed executed tests\n',
     '2020-06-02T09:35:48.861Z project Processed code coverage\n',
     '2020-06-02T09:35:48.903Z project Test run result processed and sent to IDE\n' ] }

[ArtemGovorov]

To try and get as close to your setup as possible, I have created this sample repo with your package.json dependencies and devDependencies as is. Had also added src from freshly generated Angular CLI v9 app, and added simple Jest config as described in the jest-preset-angular docs.

Running Wallaby automatic config doesn't seem to produce any issues:

I have even tried to make the sample test to look like yours by adding async and await fixture.whenStable();.

Can you please try my sample repo (git clone, npm i and run Wallaby auto-config RC), to see if you can reproduce the issue? If it is not reproducible, can you please take a look what's missing/different from your repo? Dependencies are exactly the same as yours, so may be it is some Jest/TS config missing to reproduce the issue.

[wilgert]

I also have no issue running the example project. Indicators appear at the right location.

It's a pretty old project (started in 2017) so it is likey that there is some configuration somewhere that causes this. In the past jasmine was used and wallaby was used with a config file. I think I've removed all the old config, but I will have a look. Could you give me a hint what sort of config is most likely to be causing this?

[wilgert]

I changed the jest.config.js to be as minimalist as your example repo, this also does not help.

[ArtemGovorov]

Could you give me a hint what sort of config is most likely to be causing this?

It is likely some source mapping issue. So anything in your config files that can affect source code transformation (tsconfig, jest config).

If you can't easily find the config that is causing the issue in your project, perhaps the best way is to try remove any business sensitive code form your project and share it with us on GH or by sending to hello@wallabyjs.com. I don't think actual test/app code matters, you should be able to repro even on a simple test if it is indeed source mapping issue, so it should be easy to remove all source code, but leave one test (and relevant configs).

[ioandev]

I was having the same issue yesterday, however today it was fine. Closing down other IDEs you have open with wallaby might help, as well as restarting your PC

[smcenlly]

@wilgert - did @ioanb7's suggestion help you? Have you been able to look at reproducing the problem outside of your test/app code?

[wilgert]

@wilgert - did @ioanb7's suggestion help you? Have you been able to look at reproducing the problem outside of your test/app code?

Not yet, have been working on another project for the last couple of days. Will get back to this one next week!

Then again: I have definitely restarted my PC and IDE. I think this issue has always been there with this particular project.

[wilgert]

I have created a reproduction of the issue by copying files from my project and then removing anything that is not necessary. You can find it here: https://github.com/wilgert/wallaby-2434

In VSCode the indicators are also misaligned.

[smcenlly]

Thanks for the sample repo. We can duplicate the issue with your repo. One quick note: the repo has a problem with package name in package.json so npm install doesn't work properly. Removing spaces from the package name fixes the problem.

[ArtemGovorov]

Thanks for providing the sample repo. We've been able to identify the issue and it is a bug in ts-jest source map URL generation.

To see the problem outside of Wallaby, change your 'should render a greeting' test as shown below:

  it('should render a greeting', () => {
+   throw new Error('Error');
    fixture.detectChanges();
    expect(fixture.debugElement.nativeElement.innerHTML).toEqual('<h1>Hi!</h1>');
  });

When you run npx jest, you will see that jest is reporting that the error is on line 23 instead of line 27.

To not make you wait until the fix in ts-jest is available, we have made Wallaby tolerant to malformed source map URLs, so please update to the latest core v1.0.907 and the issue should be fixed for you.

If it's not possible for you to update Wallaby, you can modify your tsconfig.spec.json file and set the mapRoot setting to an empty string:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "module": "commonjs",
    "sourceMap": true,
    "allowJs": true,
+   "mapRoot": ""
  },
  "include": ["**/*.spec.ts", "**/*.d.ts"]
}

so that Jest and Wallaby can correctly map lines.

[wilgert]

Thanks a lot @ArtemGovorov that works! @smcenlly sorry for throwing you a curveball with the project name in package.json.

[kevinbeal]

This was also happening to me when I switched from ts-jest to @swc/jest. SWC wasn't producing sourcemaps at all. I added the sourcemaps option to my jest file where I set the transform option.

module.exports = {
    displayName: "ih-api",
    preset: "../../../jest.preset.js",
    testEnvironment: "node",
    transform: {
        "^.+\\.[tj]s$": ["@swc/jest", { sourceMaps: true }]
    },
    moduleFileExtensions: ["ts", "js", "html"],
    coverageDirectory: "../../../coverage/apps/ih-api",
    setupFiles: ["../../../setupJest.js"]
};