web-dev-qa-db-ja.com

create-react-appでjestユニットテストをデバッグする方法は？

create-react-appを使用していて、単体テストをデバッグしたい

Jestのドキュメントによると のように、次のコマンドを使用してデバッグが可能です。

node --debug-brk --inspect ./node_modules/.bin/jest -i [any other arguments here]

残念ながら、create-react-appでは機能しません。代わりにこのエラーが発生しました：

node --debug-brk --inspect ./node_modules/.bin/jest -i
Debugger listening on port 9229.
Warning: This is an experimental feature and could change at any time.
To start debugging, open the following URL in Chrome:
    chrome-devtools://devtools/remote/serve_file/@60cd6e859b9f557d2312f5bf532f6aec5f284980/inspector.html?experiments=true&v8only=true&ws=localhost:9229/node
Debugger attached.
module.js:457
    throw err;
    ^

Error: Cannot find module '/Users/asafkatz/dev/newmaps/node_modules/.bin/jest'
    at Function.Module._resolveFilename (module.js:455:15)
    at Function.Module._load (module.js:403:25)
    at Timeout.Module.runMain [as _onTimeout] (module.js:590:10)
    at tryOnTimeout (timers.js:232:11)
    at Timer.listOnTimeout (timers.js:202:5)
Waiting for the debugger to disconnect...

create-react-appでjestユニットテストをデバッグする適切な方法は何ですか？

debuggingjestjscreate-react-app
12
Asaf Katz

jestをChrome DevToolsと一緒に実行すると問題が発生するようです（ この問題 を参照）。

問題：

前述のコマンドラインを使用して、新しいV8 Inspectorプロトコルを使用してノードデバッガーを起動できます（jestパスを調整します）。

node --debug-brk --inspect ./node_modules/.bin/jest --runInBand

意味：

# node params
--debug-brk: start debugger, expose external interface, and break at the first line
--inspect: use the new V8 Inspector protocol in the debugger

# jest params
--runInBand: do not fork (make it debuggable)

次に、Google Chromeを使用して、指定されたURLに接続するか、 この便利な拡張機能 を使用して自動的に接続します。

残念ながら、現時点では、テストコードでのdebugger;呼び出しは考慮されません。

回避策

この問題を回避するために、今のところ、 Visual Studio Code などのプレーンなV8protocolと互換性のあるGUIデバッガーをダウンロードできます。これを使用するには、--inspectフラグなしでノードデバッガーを起動する必要があります。

node --debug-brk ./node_modules/.bin/jest --runInBand

次に、VCSからプロジェクトフォルダーに移動し、[デバッグ]セクションに入り、標準のデバッグ構成を作成して、Attach to Process構成を実行できます。

3
nerfologist

私もVSCodeを使用していますが、2018年には、上記の構成は機能しませんでした。私はついにlaunch.jsonでこの設定を使用してそれを機能させることができました：

 {
        "name": "Debug CRA Tests",
        "type": "node",
        "request": "launch",
        "port":9229,
        "runtimeExecutable": "${workspaceRoot}/main/node_modules/.bin/react-scripts",
        "runtimeArgs": [
          "--inspect-brk",
          "test"
        ],
        "args": [
          "--runInBand",
          "--no-cache",
          "--env=jsdom"
        ],
        "cwd": "${workspaceRoot}/main",
        "protocol": "inspector",
        "console": "integratedTerminal",
        "internalConsoleOptions": "neverOpen"
      },

私のプロジェクトはmainという名前なので、workspaceRoot値の後に/ mainがあることに注意してください。これはあなたにとっては異なる場合があります。これは、プロジェクトルートの場所である必要があります。

さらに、エラー私のコードとは無関係が私のテストに到達する前にスローされました。これを修正するには、ブレークポイントの下のデバッガータブに移動し、「キャッチされなかった例外」と「module.js」のチェックを外す必要がありました。

これらの手順を実行した後、単体テストをデバッグしたり、ブレークポイントを設定したりできるようになりましたが、それでも希望どおりに機能しません。たとえば、ターミナルで追加のコマンドラインを実行しますが、他にもわずかな奇妙な点があります。しかし、それは仕事を成し遂げるのに十分うまく機能します。

6
neural

Visual Studio Codeを使用している場合は、次の構成を使用できます。うまくいけば、これは誰かを数時間節約します。

私の設定：

  • 排出されないcreate-react-app（1.3.1）プロジェクト
  • ノードバージョン：v6.10.3
  • Npmバージョン：4.6.1

これを機能させるには、npm i --save-dev jest-file jest-cssを使用して jest-file および jest-css をインストールする必要もありました。これらはファイルトランスフォーマーとして使用されるため、jestはファイル（svgなど）のインポートについて文句を言いません。

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Test with debugger",
      "type": "node",
      "request": "launch",
      "port": 5858,
      "runtimeArgs": [
        "--debug-brk",
        "--nolazy"
      ],
      "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
      "args": [
        "--runInBand",
        "--transform={\"^.+\\\\.(js|jsx)$\": \"babel-jest\",\"^.+\\\\.css$\": \"jest-css\",\"^(?!.*\\\\.(js|jsx|css|json)$)\": \"jest-file\"}"
      ],
      "cwd": "${workspaceRoot}"
    }
  ]
}

説明

--nolazy：ブレークポイントを正しく使用できるように、コードを完全にコンパイルします

--runInBand：Jestがワーカープロセスでテストを生成するのを停止します

--transform：svgなどのファイルをインポートするときにエラーを停止します。これをpackage.jsonに追加すると、react-scriptsは変換オプションの上書きをサポートしていないため、npm testを実行できません。

次の行をpackage.jsonまたは。babelrcに追加する必要があります

"babel": {
  "sourceMaps": "inline",
  "presets": [
    "react-app"
  ]
}

説明

sourceMaps：これは「インライン」または「両方」のいずれかである必要があります。これを設定しない場合、テストをデバッグすると、ソースの代わりにトランスパイルされたコードが表示されます。

プリセット：react-appは、create-react-appプロジェクトのデフォルトのプリセットです。これをpackage.jsonまたは.babelrcのいずれにも含めないと、jestがjsxの処理方法を知らないため、エラーが発生します。

結果enter image description here

Visual Studio Codeを使用していない場合は、次のコマンドを実行し、別のGUIデバッガーを使用してデバッグセッションに接続できます：node --debug-brk ./node_modules/jest/bin/jest.js --runInBand --config=./jest-config.json 。以下の設定をjest-config.jsonファイルに必ず入れてください。

"transform": {
  "^.+\\.(js|jsx)$": "babel-jest",
  "^.+\\.css$": "jest-css",
  "^(?!.*\\.(js|jsx|css|json)$)": "jest-file"
}
5
tamj0rd2

create-react-appそのnode_modules（したがってjest）を別の場所に配置します。これを試して：

node --debug-brk --inspect ./node_modules/react-scripts/node_modules/.bin/jest -i

それでも問題が解決しない場合は、プロジェクトのフォルダーでjestというファイルを検索し、パスを更新してください。

0
Untangled