Vue + jest 调试答案

【问题标题】：Vue + jest debugVue + jest 调试
【发布时间】：2020-06-16 17:14:18
【问题描述】：

我正在尝试调试我的 vue 项目，该项目使用 jest 进行测试。

jest.config.js：

module.exports = {
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    'vue'
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest'
  },
  transformIgnorePatterns: [
    '/node_modules/',
    '/node_modules/(?!@babel)'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  testURL: 'http://localhost/',
  watchPlugins: [
    'jest-watch-typeahead/filename',
    'jest-watch-typeahead/testname'
  ]
}

launch.json：

{
"version": "0.2.0",
"configurations": [
 {
    "type": "node",
    "request": "launch",
    "name": "Debug Unit Tests",
    "runtimeExecutable": "npm",
    "runtimeArgs": [
      "run-script",
      "test:debug",
      "${file}"
    ],
    "port": 9229
  }
]

}

我几乎尝试了所有在线教程，例如： https://medium.com/@sarngru/debug-vuejs-jest-tests-in-vscode-63e2ed45e503 尝试运行调试时得到：

node_modules\.bin\vue-cli-service:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
    at new Script (vm.js:83:7)
    at createScript (vm.js:267:10)
    at Object.runInThisContext (vm.js:319:10)
    at Module._compile (internal/modules/cjs/loader.js:684:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:774:12)
    at executeUserCode (internal/bootstrap/node.js:342:17)
Waiting for the debugger to disconnect...

尝试了 npm install -g @vue/cli-service-global 但它不起作用..请帮助！谢谢！

【问题讨论】：

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

【解决方案1】：

这对我有用启动.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": "node",
      "request": "launch",
      "name": "Jest",
      "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
      "args": ["-i"],
      "skipFiles": ["<node_internals>/**/*.js", "node_modules"]
    } 
   ]
}

【讨论】：