Vue CLI: Debugging Jest unit tests with Chrome Node devtools

Jest documentation has a great guide on debugging failing tests. With minor modifications, the same approach can be used to debug tests that are wrapped by Vue CLI.

Given you already have the standard test scripts in your package.json, we can add a separate script to run the same task in debugging mode:

{
  "scripts": {
    "test:unit": "vue-cli-service test:unit",
    "test:debug": "node --inspect-brk node_modules/.bin/vue-cli-service test:unit --runInBand --watchAll"
  }
}

Since this is a fair mouthful, let’s cover the steps in isolation:

• node --inspect-brk <script> runs the given script in debug mode, automatically breaking at the start of the script
• --runInBand makes Jest tests run tests in order in a single process (as opposed to multiple parallel processes by default)
• --watchAll keeps Jest running and watches for changes as you update your test code

With the above setup, all you need to do to debug a test is:

1. Add a debugger; statement in the test you want to debug
2. Run the debug script for the given test yarn test:debug tests/offending.spec.ts
3. In Chrome, open chrome://inspect and click Open dedicated devtools for Node

Chrome devtools will attach to the running process and you can use the debugger as usual.