调试 Jest 测试 Visual Studio 代码答案

【问题标题】：Debugging Jest Test Visual studio code调试 Jest 测试 Visual Studio 代码
【发布时间】：2019-08-20 13:01:16
【问题描述】：

我想在新创建的 VueJs 项目中调试 Visual Studio 代码中用 Jest 编写的测试。测试是用打字稿写的。我认为它与Vue无关。

我已经尝试了一些堆栈溢出示例，但没有任何效果。我仍然收到此错误：

Jest 遇到了意外的令牌

C:\src\vue-testing-sample\tests\unit\Caculator.spec.ts:1 ({"Object.":function(module,exports,require,__dirname,__filename,global,jest){import { Calculator } from "../../src/Calculator"; SyntaxError：在 ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17) 处意外导入令牌

这是一个测试：

import { Calculator } from "../../src/Calculator";

describe("HelloWorld.vue", () => {
    it("adds two number", () => {
        const calculator = new Calculator();
        const result = calculator.add(1, 2);
        expect(result).toBe(3);
    });
});

和我的配置：

 "type": "node",
 "request": "launch",
 "name": "Jest All",
 "program": "${workspaceRoot}/node_modules/jest/bin/jest",
 "args": ["--runInBand"],
 "console": "integratedTerminal",
 "internalConsoleOptions": "neverOpen"

我可以从默认 Vue Webpack 配置的控制台添加运行测试。

【问题讨论】：

stackoverflow.com/questions/47563964/debugging-jest-on-vs-code的可能重复

标签： typescript debugging vue.js visual-studio-code jestjs

【解决方案1】：

这是我在 VSCode 上调试 Jest 测试的配置，将其添加到 settings.json 中的启动配置中

"launch" : {
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Jest",
      "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
      "args": [
          "-i"
      ],
       "skipFiles": [
        "<node_internals>/**/*.js", "node_modules",
      ]
    },
  ],
}

【讨论】：

你的项目中有打字稿吗？
只是 JS，我稍后会做更多的挖掘，看看是否可以让 typescript 版本工作。在没有 Vue 的情况下，你有一个基本的 typescript 项目可以调试吗？
很遗憾没有

【解决方案2】：

screen.debug() 是我最好的解决方案！

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。