Блог

Я пишу приложение с использованием react native и хочу иметь возможность тестировать свой код с помощью jest framework и использовать отладчик visual studio code editor для установки точек останова. Проблема, с которой я сталкиваюсь в настоящее время, заключается в том, что независимо от того, как я запускаю отладчик, будь то создание нового экземпляра или его подключение, я не могу заставить исходные карты работать из babel. Я пробовал различные конфигурации в файле .babelrc, но, похоже, ни одна из них не работает.

Версия VSCode — 1.6.0 (последняя версия)

Моя структура каталогов похожа на это

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

затем в my .babelrc у меня есть следующее

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

Я попытался установить значение sourceMaps prop для обоих true , inline и оба не работали с текущей launch.json конфигурацией.

Вот мой launch.json способ запуска тестера Jest

 {

            "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"
}
  

Оба --harmony и --runInBand необходимы для правильной работы отладчика, поскольку Jest породит дочерний процесс, который конфликтует с портами.

У меня также есть дополнительная конфигурация Jest в моем package.json

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

Теперь всякий раз, когда я запускаю отладчик, он запускается и останавливается на точках останова вывода babel вместо исходного источника, что не очень помогает. Я должен также упомянуть, что сам тест скомпилирован babel, и я не уверен, имеет ли это значение.

Любые указатели или различные конфигурации приветствуются.

Параметр .babelrc является sourceMap единственным. { "sourceMap" : "inline" } работает для меня.

Я смог получить правильную исходную карту VS Code и размещение точек останова в исходных файлах вместо переноса для работы с Jest Babel с помощью:

1. Чтобы убедиться, что Babel генерирует исходные карты, для этого нужно установить sourceMap в положение inline в babel разделе my package.json (возможно, вам придется сделать это в your .babelrc.json вместо этого).

2. В моем launch.json файле VS Code я заменил debugger с node на pwa-node . Это позволило мне указать resolveSourceMapLocations свойство и указать VS Code, что исходные файлы находятся в моем каталоге рабочей области. Я думаю, что это необходимо из-за того, что Jest создает файлы в своем собственном кэше.

Моя полная lunch.json конфигурация:

 {
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "vscode-jest-tests",
            "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
            "args": [
                "--no-cache",
                "--config",
                "${workspaceRoot}/jest.config.json",
                "--runInBand",
                "--detectOpenHandles"
            ],
            "internalConsoleOptions": "neverOpen",
            "outFiles": [
                "${workspaceRoot}/dist/**/*"
            ],
            "env": {
                "NODE_ENV": "test"
            },
            "runtimeArgs": [
                "--nolazy"
            ],
            "console": "integratedTerminal",
            "sourceMaps": true,
            "smartStep": true, 
            "skipFiles": [
                "<node_internals>/**",
                "node_modules/**"
            ],
            "resolveSourceMapLocations": [
                "${workspaceFolder}/**",
                "!**/node_modules/**"
            ],
        }
    ]
}
  

Я использую VS Code 1.53, Jest 25.5.4

Какова ваша конфигурация jest? Я видел странный вывод, связанный с покрытием, пока не добавил следующее значение конфигурации:

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