web-dev-qa-db-ja.com

Visual StudioCodeデバッガー内でJestを使用するときにソースマップを構成する方法

私はreactnativeを使用してアプリを作成していますが、jestフレームワークを使用してコードをテストし、Visual Studio CodeEditorデバッガーを使用してブレークポイントを設定できるようにしたいと考えています。私が現在抱えている問題は、新しいインスタンスを生成するかアタッチするかに関係なく、デバッガーをどのように実行しても、babelからソースマップを機能させることができないようです。 .babelrcファイル内のさまざまな構成を試しましたが、どれも機能していないようです。

VScodeバージョン-1.6.0（最新）

私のディレクトリ構造はこれに似ています

-package.json
-node_modules
-.babelrc
-dist
-app
 -myModule.js
 -test
   -myModule.spec.js

それから私の.babelrcに私は以下を持っています

{
    "presets" : ["react-native"],
    "sourceMaps" : true,
    "outDir" : "./dist"
}

sourceMapsプロップをtrueとinlineの両方に設定しようとしましたが、どちらも現在のlaunch.json構成では機能しませんでした。

これがJestテスターを実行するための私のlaunch.jsonです

{

            "name" : "Launch via jest",
            "type": "node",
            "request": "launch",
            "program" : "${workspaceRoot}/node_modules/jest/bin/jest.js",
            "cwd": "${workspaceRoot}",
            "args": [
                "--runInBand"
            ],
            "runtimeArgs": [
                "--harmony"
            ],
            "sourceMaps": true,
            "outDir" : "${workspaceRoot}/dist"
}

Jestはポートと競合する子プロセスを生成するため、デバッガーを正しく機能させるには、--harmonyと--runInBandの両方が必要です。

Package.json内に追加のJest構成もあります

"jest": {
    "preset": "jest-react-native"
  }

これで、デバッガーを実行するたびに、デバッガーが実行され、元のソースではなく、babel出力のブレークポイントで停止します。これはあまり役に立ちません。また、テスト自体はbabelによってコンパイルされていることにも言及する必要がありますが、それが重要かどうかはわかりません。

ポインタや異なる構成はすべて歓迎されます。

debuggingreact-nativebabeljsvisual-studio-codejestjs
20
naughty boy

.babelrcオプションはsourceMap単数です。 { "sourceMap" : "inline" }私のために働きます。

4
Stephen J. Collings

あなたの冗談の構成は何ですか？次の構成値を追加するまで、カバレッジに関連する奇妙なトランスパイル出力が表示されていました。

"testRegex": "src/.*\\.test\\.js$"

0
M. Herold