ESLint test report in buddybuild

My team uses ESLint and Jest on a daily basis for several projects. That’s why we were pretty exciting when buddybuild announced the support of custom test reporting.

This feature consists in displaying a tab with the test results for each build. It works seamlessly with Jest which figures in the list of supported frameworks, by simply adding the following lines in the post-build hook:

Don’t forget the “exit 1” to make the build fails in case of failed tests

Then, at the end of the build, a Jest tab appears and displays the result of the tests execution:

Successful tests in buddybuild

We tried to do the same with ESLint but the result was pretty bad: A “ESLint” showed up but was empty:

The “99” is the total number of tests from all frameworks, here: only the Jest ones.

It appears that buddybuild is not able to parse the ESLint JSON output (it isn’t mentioned in the list of supported frameworks after all).

JSON output transformation

What if we transform the ESLint JSON output to make it similar to the Jest one? We know for sure that buddybuild is able to parse it.

Jest produces the following JSON (reduced to a single failed test suite for the sake of readability):

The output contains metadata about the execution, number of tests succeeded, failed & total, information about snapshots, status, etc. and a testResults node which contains an object for each test suite.

These underlying objects also contain metadata and an assertionResults node which contains an object for each test case.

Let’s examine the structure of the JSON produced by ESLint now. Here is a shortened example:

ESLint goes straight to the essential: no metadata, just an array with an object representing each file.

So let’s try to transform the JSON in order to make buddybuild able to parse it. A proper ESLint report would be an array with a line for each file verified, so we’ve build a Jest-style JSON object representing a single test suite including a test case for each file of the ESLint report.

In a simple NodeJS script that read and parse the ESLint output file, we create a raw root object:

Then, we fill the assertionResults array with objects that look like the Jest test cases:

We keep trace of the error count for the next step

Finally, we add the metadata, based from the presence of errors or not:

Note that the message, name and summary empty strings are needed even if they aren’t display anywhere. For some reason, buddybuild won’t be able to parse the JSON file if they are not present.

And voilà!

Relevant ESLint report in buddybuild

Wrap up

Here is the Gist with the whole and eslint-output-adapter.js files. These 2 files contain all the magic.

I admit that the whole “JSON output transformation” thing looks like a dirty workaround. There are better ways to transform a JSON structure to another, like using existing tools (like node-json-transform or json-transforms), but there are pretty good chance that the situation is temporary: it’s a transition until buddybuild officially supports ESLint, so I didn’t want to overthink the solution (hey buddybuild, an official statement in comments about that would be pretty cool 😉).

When they do, I hope they would support it better than I did, like handle ESLint warnings as well, handle multiple errors per file, show the code snippet in tooltip, etc.

In the meantime, we finally manage to unify our CI, dropping an old Jenkins instance whose the only job was to run the lint & test commands.