Read more

How to access Chrome Devtools when running JavaScript tests via CLI

Michael Leimstädtner
February 02, 2022Software engineer at makandra GmbH

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.

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

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

{
  "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:

{
  "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 🎉!

Posted by Michael Leimstädtner to makandra dev (2022-02-02 16:10)