Encountering ember-cli-code-coverage mocha showing 0% coverage when there are tests can be one of the most frustrating experiences for a developer striving for robust code quality. You’ve written comprehensive tests, your Mocha suite runs without errors, yet the coverage report bafflingly displays zero percent. This common issue often stems from subtle misconfigurations within the build pipeline, particularly concerning how your JavaScript code is transpiled and instrumented for coverage analysis. It’s not a reflection of your test quality, but rather a hiccup in the tooling’s ability to track executed lines. This guide will meticulously break down the root causes and provide actionable steps to diagnose and resolve this elusive problem, ensuring your Ember application’s codebase accurately reflects its test coverage.

Understanding the Core Problem: Instrumentation and Transpilation

At its heart, code coverage works by “instrumenting” your source code. This means adding small bits of code that track which lines are executed during tests. Tools like IstanbulJS, which powers ember-cli-code-coverage, insert these counters. When your tests run, these counters increment, and afterward, a report is generated based on their final values. If the instrumentation step doesn’t happen correctly, or if the test runner executes a version of your code that hasn’t been instrumented, you’ll inevitably see 0% coverage, even with passing tests.

The complexity arises in modern JavaScript development due to transpilation. Ember CLI projects typically use Babel to transform cutting-edge JavaScript features (like ES2015+ syntax or TypeScript) into a version compatible with browsers or Node.js. This transpilation process occurs before your tests run. If the instrumentation tool tries to instrument the original, untranspiled source code, but your tests run against the transpiled code, the coverage mapping will fail. Conversely, if instrumentation happens on the transpiled code, but the coverage reporter then tries to map it back to the original source without correct sourcemaps, it can also lead to issues or 0% coverage. Proper integration between transpilation, instrumentation, and sourcemap generation is paramount.

Many developers overlook the intricate dance between these steps, leading to the dreaded zero-coverage report. Debugging this requires a systematic approach, understanding where the code is modified and executed in your build and test pipeline. For detailed insights into how IstanbulJS handles instrumentation, consult the official IstanbulJS documentation on instrumentation, which can shed light on the underlying mechanisms at play.

Common Causes for Zero Coverage

The ember-cli-code-coverage mocha showing 0% coverage when there are tests issue is often rooted in a few common areas. Pinpointing the exact cause requires checking specific configurations and build artifacts. The primary suspects usually involve sourcemap issues, incorrect test helper setups, or misconfigured instrumentation within your Ember CLI environment.

Sourcemap Configuration Issues

Sourcemaps are crucial for bridging the gap between your original source code and the transpiled, instrumented code that runs in your test environment. If your sourcemaps are incorrect, incomplete, or not being used by the coverage reporter, IstanbulJS won’t be able to map the executed lines back to your original files, resulting in 0% coverage. This is a very common scenario, especially after upgrading Ember CLI versions or adding new Babel plugins.

For example, if your Babel configuration is generating inline sourcemaps, but ember-cli-code-coverage expects external ones, or vice-versa, the mapping can fail. Ensure your ember-cli-build.js and any Babel configurations are set to generate proper sourcemaps that are accessible to the coverage tool. A misconfigured ember-cli-babel setup or a forgotten .babelrc file can easily throw off this delicate balance. Always verify that sourcemaps are being generated correctly and are consumed by the coverage reporter.

Test Helper Setup and Environment

The way your tests are loaded and executed can also influence coverage. If your tests are running in a non-standard environment or if the global __coverage__ object (where Istanbul stores its data) isn’t being correctly reported or flushed, you might see zero coverage. This is particularly relevant for acceptance tests that run in a browser environment.

For instance, ensure that your tests/test-helper.js correctly imports and initializes the necessary components for coverage. Sometimes, if tests are run in isolation or if certain test runners don’t properly integrate with the coverage instrumentation, the data simply isn’t collected. Verify that your start and end hooks in your test suite are properly configured to allow the coverage middleware to capture data. For more information on configuring your Mocha tests, refer to the MochaJS official documentation.

Incorrect Instrumentation

This is perhaps the most direct cause. If your source files are not being instrumented at all, or if they are instrumented incorrectly, no coverage data will be generated. This can happen if ember-cli-code-coverage isn’t configured to include the correct file paths, or if another build step is interfering with the instrumentation.

The most common reason for ember-cli-code-coverage mocha showing 0% coverage when there are tests is often that the code running in your test environment has not been correctly instrumented by IstanbulJS. This typically occurs because of an issue in the build process where source files are transpiled by Babel before instrumentation, or where sourcemaps are not properly generated or consumed, preventing the coverage tool from mapping executed lines back to the original source.

Verify your coverage.js configuration in the root of your project (or within ember-cli-build.js) to ensure the instrumentation and reporters options are set up correctly. Specifically, check the excludes array to make sure you’re not accidentally excluding the very files you want to cover. Ensure that the instrumentation step occurs at the correct phase of your build, ideally after Babel transpilation but before minification, and that it correctly processes your application’s source files.

To systematically address the issue of ember-cli-code-coverage mocha showing 0% coverage when there are tests, follow these steps:

1. Verify ember-cli-code-coverage Installation and Configuration: Ensure the addon is correctly installed in your package.json and present in your addons folder. Check your coverage.js configuration file (or the codeCoverage property in ember-cli-build.js). Pay close attention to the excludes and include arrays to confirm your application files are targeted for instrumentation. For example, make sure app//.js is not excluded.
2. Inspect Sourcemaps: This is critical. During your development build (e.g., ember serve), open your browser’s developer tools and look at the “Sources” tab. Can you see your original, untranspiled Ember files? If not, your sourcemaps might be misconfigured. Ensure your Babel setup (via ember-cli-babel) is generating sourcemaps, and that ember-<b>Question & Answer : </b><br></br><p>I'm using <a href="https://github.com/kategengler/ember-cli-code-coverage" rel="noreferrer">ember-cli-code-coverage</a> with <a href="https://github.com/ember-cli/ember-cli-mocha" rel="noreferrer">ember-cli-mocha</a>. <br></br>When I run COVERAGE=true ember test I'm getting 0% coverage for statements, functions, and lines. <br></br>Yet, I have tests that are covering those sections. <em>Any I missing something in my setup?</em></p> <p><a href="https://i.sstatic.net/Oc9Yz.png" rel="noreferrer"><img alt="enter image description here" src="https://i.sstatic.net/Oc9Yz.png"></img></a></p> <p>unit test file:</p> <pre class="lang-js prettyprint-override">beforeEach(function() { controller = this.subject(); }); it('sets selectedImage to null', function() { expect(controller.get('selectedImage')).to.eql(null); }); describe('setCoverageTest', function() { it('sets selectedImage to true', function() { expect(controller.get('selectedImage')).to.eql(null); controller.setCoverageTest(); expect(controller.get('selectedImage')).to.be.true; }); }); </pre> <p>config/coverage.js:</p> <pre>module.exports = { excludes: ['*/templates/**/*'], useBabelInstrumenter: true }; </pre><br></br><p>Few well integrated tools to establish accurate code coverage for ember-cli apps exist. (something like Istanbul for everything in app/) We ended up avoiding ember-cli-blanket and writing a rudimentary istanbul 78 integration with testem. Basically, it calls the istanbul cli against the single JS file output by ember build. Imprecise but consistent. We've used in on <a href="https://idealecasinos.nl/online-casinos/casinoapps/" rel="nofollow noreferrer">iDealeCasinos</a> multiple times and it worked like a charm. Might be wise to give it a shot!</p>