Error Messages and Red Lights Displayed in IntelliJ IDEA Editor although test was fixed

[pahund]

Issue description or question

When I'm working on a test and doing some refactoring, the refactoring in progress results in a compile error. Wallaby displays this error next to the code that I'm working on and shows a red light at the beginning of the line. So far so good, that is expected.

However, when the refactoring is finished and the code compiles again, the error message in the editor stays and the line continues to be marked red, while Wallaby tool window correctly reports “no failing tests”.

I have to restart my Wallaby.js run configuration to get a green light on the refactored code line.

I made a video to demonstrate the bug: https://youtu.be/0woztRC_Kl0

Wallaby.js configuration file

module.exports = wallaby => ({
    files: [
        "frontend/app/**/*.js",
        "frontend/app/**/*.scss",
        "frontend/test/testdata.json",
        "frontend/test/testUtils.js"
    ],

    tests: [
        "frontend/test/**/*Test.js"
    ],

    env: {
        type: "node",
        runner: "/usr/local/bin/node"
    },

    testFramework: "mocha",

    compilers: {
        "**/*.js": wallaby.compilers.babel()
    },

    bootstrap: () => {
        const path = require("path");
        const setupPath = path.join(wallaby.localProjectDir, "frontend/test/setup");
        require(setupPath);
    }
});

Code editor or IDE name and version

IntelliJ IDEA Ultimate 2016.1.1

OS name and version

OS X El Capitan 10.11.4

[ArtemGovorov]

Thanks for the detailed description and the video!
We have had a similar issue reported internally some time ago and IIRC it was related to an issue in Babel with generating correct source maps. What Babel version are you using?

[ArtemGovorov]

Quick note, as a faster workaround for glitches like this one, you may hit Alt + Enter and choose Run file tests instead of restarting wallaby.js.

[ArtemGovorov]

Could you please also share your .babelrc file?

[ArtemGovorov]

Another workaround for the issue is to use a block statement:

it('has a child <h3> element', () => {
  childOf...
});

instead of the arrow function expression:

it('has a child <h3> element', () => 
  childOf...
);

[pahund]

Hi @ArtemGovorov, thanks for the quick reply!
I'm using Babel 6.7.5, my .babelrc looks like this:

{
  "presets": ["es2015", "react"]
}

[pahund]

In my webpack config, I use devtool "#source-map", but webpack is not involved in my test setup. I'm assuming the source maps come from some config inside Wallaby?

[ArtemGovorov]

Babel generates source maps when compiling your files, wallaby just uses those maps to map error stacks from the actually executed compiled code back to your original code. There was an issue with babel generated source maps that was causing a similar issue.

[pahund]

So could I work around by configuring wallaby to use a different type of source map, e.g. inline? How would I do that?

[ArtemGovorov]

No, the source map type doesn't matter. There's no workaround that can be done with some configuration. You may use this workaround for now.

[pahund]

OK, thanks

[ArtemGovorov]

After a careful investigation, it turned out to be an issue in wallaby.js, not in babel generated source maps (even though it is related to the way babel generates source maps for arrow functions with no body).

The issue is fixed in wallaby core v1.0.223 (you may restart your IDE and start wallaby to force the update). Thanks again for the detailed description and the issue video, it was very helpful in finding out the reason and fixing it.

[pahund]

Thanks for acting so quickly! Cheers!