Debugging tests in Angular + Jest

2020-11-15

Lately Jest has been slowly, but surely replacing karma as the go-to test framework in Angular projects - for better or worse.

For me the one thing that's been missing after the transition (and something we had in karma) is an obvious way to debug tests. While the library's docs do provide a solution, it only really works when you're running the test file as a Node script - not the case in Angular, where tests are normally launched via the CLI.

Fortunately there's a way around that - the CLI script is usually launched from ./node_modules/.bin/ng and looks more or less like this:

#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")

case `uname` in
    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
esac

if [ -x "$basedir/node" ]; then
  "$basedir/node"  "$basedir/../@angular/cli/bin/ng" "$@"
  ret=$?
else 
  node  "$basedir/../@angular/cli/bin/ng" "$@"
  ret=$?
fi
exit $ret

Now the only thing that has to be done to enable debugging is adding an --inspect-brk flag after each mention of the Node executable so e.g. this line:

node  "$basedir/../@angular/cli/bin/ng" "$@"

Turns into this:

node --inspect-brk "$basedir/../@angular/cli/bin/ng" "$@"

Remember to launch your tests with --runInBand, since Node.js Inspector doesn't break on debugger statements in child processes:

ng test --runInBand

And there you have it.