How to access Chrome Devtools when running JavaScript tests via CLI

While we are used to run our JavaScript tests on a test page within our Browser, it's also possible to run them on the command line with NodeJS. I think that's actually the most common way to run JS tests.

Given a Vue project that uses Jest (via vue-cli-service) with the following package.json:

Copy{
  "scripts": {
    "test": "vue-cli-service test:unit --testMatch='**/tests/**/*.test.js' --watch"
  },
}

This allows us to run Jest tests with yarn test. The only downside of this setup is that debugger statements are ignored with the CLI approach - there are no Browser Devtools that can help you inspect the running code.

Luckily there is a way around this. Add a second entry to your package.json:

Copy{
  "scripts": {
    "test": "vue-cli-service test:unit --testMatch='**/tests/**/*.test.js' --watch"
    "test:debug": "node --inspect-brk ./node_modules/.bin/vue-cli-service test:unit --testMatch='**/tests/**/*.test.js' --runInBand --watch",
  },
}

If you start your tests with yarn test:debug, node will wait until you attach some DevTools to your process. To do so, open chrome://inspect/#devices and press "inspect". Continue script execution in the newly opened inspector.

You are now able to place debugger statements to your code 🎉!