为什么我的笑话测试的堆栈跟踪指向错误的行号？

Question

当我在包含错误的存储库中运行玩笑测试时，堆栈跟踪指向错误的行号。这使得调试非常困难。例如：

\n

预期错误

\n

  \xe2\x97\x8f SimpleComponent \xe2\x80\xba renders\n\n    ReferenceError: retur is not defined\n\n      4 | export const Simple = () => {\n      5 |   const [count, setCount] = useState(0);\n    > 6 |   retur (\n        |   ^\n      7 |     <div>\n      8 |       <p>You clicked {count} times</p>\n      9 |       <button onClick={() => setCount(count + 1)}>Click me</button>\n\n      at Simple (src/SimpleComponent.jsx:6:3)\n      at Object.<anonymous> (tst/SimpleComponentTest.jsx:8:5)\n

\n

收到错误

\n

请注意，它指向错误的行号 - 34 而不是 6。

\n

  \xe2\x97\x8f SimpleComponent \xe2\x80\xba renders\n\n    ReferenceError: retur is not defined\n\n\n\n      at Simple (src/SimpleComponent.jsx:34:3)\n      at Object.<anonymous> (tst/SimpleComponentTest.jsx:14:23)\n

\n

我的发现

\n

我发现如果我注释掉中的moduleDirectoriesjest.config.js条目，那么我会收到预期的错误消息。我不明白为什么moduleDirectories会有这样的影响。

\n

不过，我想保留我的moduleDirectories.

\n

问题

\n

为什么笑话测试的堆栈跟踪指向错误的行号？我该如何修复它？

\n

文件

\n

我在https://github.com/bluprince13/jest-wrong-line-numbers-in-stack-trace中上传了一个最小的示例

\n

来源

\n

请注意，该return语句拼写错误。

\n

// src/SimpleComponent.jsx\nimport React, {useState} from "react"\n\nexport const Simple = () => {\n  const [count, setCount] = useState(0);\n  retur (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n};\n

\n

测试

\n

// tst/SimpleComponentTest.jsx\nimport { Simple } from "../src/SimpleComponent";\nimport { render } from "@testing-library/react";\nimport React from "react";\n\ndescribe("SimpleComponent", () => {\n  it("renders", () => {\n    render(<Simple />);\n  });\n});\n

\n

.babelrc

\n

{\n    "presets": [\n        "@babel/preset-react",\n        [\n            "@babel/preset-env"\n        ]\n    ]\n}\n

\n

笑话配置.js

\n

module.exports = {\n  moduleDirectories: [\n    "<rootDir>/src",\n    "<rootDir>/tst",\n    "<rootDir>/node_modules"\n  ],\n  testMatch: ["**/tst/**/(*)Test.js?(x)", "**/?(*.)(spec|test).js?(x)"],\n  transform: {\n    "^.+\\\\.jsx?$": "babel-jest"\n  }\n};\n

\n

包.json

\n

{\n    "scripts": {\n        "test": "jest --runInBand"\n    },\n    "dependencies": {\n        "react": "^16.14.0",\n        "react-dom": "^16.14.0",\n        "snapshot-diff": "^0.6.2"\n    },\n    "devDependencies": {\n        "babel-jest": "^25.2.4",\n        "@babel/preset-env": "7.x",\n        "@babel/preset-react": "7.x",\n        "@testing-library/react": "^9.2.0",\n        "jest": "^26.6.3"\n    }\n}\n

\n

Answer 1

为什么笑话测试的堆栈跟踪指向错误的行号？我该如何修复它？

它与源映射有关。如果这些没有正确生成或处理，调试器将显示错误的行。

我发现了三种方法来解决这个问题：

1. 更改<rootDir>/node_modules为node_modules您的 moduleDirectories

   为什么这可以解决问题？

   • 如果<rootDir>添加了，则开玩笑或更准确地说其底层模块source-map-support使用source_map来自 的模块node_modules/source-map。在我的例子中，全新安装的示例是0.7.3. 但source_map_support依赖的是^0.6.0. 它实际上带来了正确的版本node_modules/source-map-support/source-map。但由于指定的某种原因<rootDir>，它无法再访问它。这就引出了第二个解决方案。

2. 通过手动将source-map模块降级^0.6.0为项目的依赖项。在这种情况下，node_modules/source-map将再次提供正确的版本，但这可能会破坏其他内容，因为尚不清楚这个错误版本的来源。

3. 将项目依赖项升级到最新版本。尝试npm outdated一下，你会发现它们都已经过时了：