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:

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.