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 web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
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)