Empty Jest Coverage Report (Vue.js)

The Symptoms

You have empty coverage reports or there are files missing from your coverage report. You’ve definitely written tests that include those files and can’t figure out what you’re doing wrong.

Note that I had this issue with Vue.js and the Vue CLI specifically, it could also be an issue with other projects using Jest (or possibly just anything running Istanbul under the hood) but the resolution below is specific to projects running Vue.js created via the Vue CLI.

The Problem

The problem is with Jest, more specifically Istanbul, which is the package that Jest uses to generate coverage reports. In projects generated via the Vue CLI this is actually going to require an upgrade to the Vue CLI packages saved in your dev dependencies.

The Solution

Upgrade the Vue CLI to the latest version. Luckily the Vue CLI provides a handy command for upgrading your project, it should handle upgrading not only the packages but all the relevant configs as well.

$ vue upgrade

When you run the upgrade command it will prompt you with an explanation of what it’s going to upgrade and to what version (Note that if you’re on Vue 2 it won’t upgrade to Vue 3). In principle that’s it, in practice you may encounter some additional issues, see below.

Troubleshooting

First off you may also need to upgrade node version (depending on your current version) at the time of writing anything equal to or above 14.17.0 should be sufficient. However you might want to check the Node.js website and use this as an opportunity to upgrade to whatever is the current LTS.

If you run yarn test after the upgrade you will probably get some new linting errors come up as the linting rules will likely have been updated. You should be able to fix these pretty easily by either fixing the issue or by telling ESLint to ignore the issues (you can add global ignore rules in the .eslintec.js or comments on individual lines in your code)

Once your test are passing you can run yarn serve, if you get an error message similar to the below it’s a webpack issue.

Module not found: Error: Can't resolve 'path' in '/var/www/example-ERROR in ./node_modules/dotenv/lib/main.js 2:13-28
Module not found: Error: Can't resolve 'path' in '/var/www/example-app/node_modules/dotenv/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }

I got this error for a number of modules including os and fs, trying to fix it as suggested in the error message just resulted in more errors from other modules, and fs in perticular couldn’t just be disabled as it’s used by dotenv which is needed to pull in environment variable.

To fix it install node-polyfill-webpack-plugin and add the following to your vue.config.js

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

module.exports = {
    configureWebpack: {
        plugins: [
            new NodePolyfillPlugin(),
        ],
        resolve: {
            fallback: {
                fs: false,
            },
        },
    },
};

If you had any other issues not mentioned here please comment your solutions below so that others can benefit from your experience.