ReactコンポーネントのテストケースをChromeでデバッグする

ReactというよりJestの機能ですが、Reactコンポーネントのユニットテストは、Chromeでデバッグできます。

1. テストケースでBreakPointを設定したい場所にdebugger文を書く

通常のデバッグと同じです。

  expect(tree).toMatchSnapshot();

  debugger

  // manually trigger the callback

2. デバッグオプション付きでJestを起動

$ node --inspect-brk node_modules/.bin/jest --findRelatedTests [テストケースへのパス]

デバッガの接続待ちで停止する

Debugger listening on ws://127.0.0.1:9229/4e252f35-9932-4144-ad7e-cd9c659a0b86
For help, see: https://nodejs.org/en/docs/inspector

3. ChromeのURLからchrome://inspectを入力

4. Target - inspectをクリックしてデバッガを立ち上げる

右上のResume script Executionで実行すると、BraekPointを設定した位置で停止する。

通常のデバッグと同じく、consoleから変数の内容の確認などができる

参考