javascript - 为什么我的 Jest 测试的堆栈跟踪指向错误的行号？

Question

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

预期错误

  ● SimpleComponent › renders

    ReferenceError: retur is not defined

      4 | export const Simple = () => {
      5 |   const [count, setCount] = useState(0);
    > 6 |   retur (
        |   ^
      7 |     <div>
      8 |       <p>You clicked {count} times</p>
      9 |       <button onClick={() => setCount(count + 1)}>Click me</button>

      at Simple (src/SimpleComponent.jsx:6:3)
      at Object.<anonymous> (tst/SimpleComponentTest.jsx:8:5)

收到错误

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

  ● SimpleComponent › renders

    ReferenceError: retur is not defined



      at Simple (src/SimpleComponent.jsx:34:3)
      at Object.<anonymous> (tst/SimpleComponentTest.jsx:14:23)

我的发现

我发现如果我注释掉 moduleDirectories在 jest.config.js 中输入，然后我得到了预期的错误消息。我不明白为什么 moduleDirectories 有这样的影响。

但是，我想保留我的moduleDirectories。

问题

为什么 Jest 测试的堆栈跟踪指向错误的行号？我该如何解决？

文件

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

来源

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

// src/SimpleComponent.jsx
import React, {useState} from "react"

export const Simple = () => {
  const [count, setCount] = useState(0);
  retur (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
};

测试

// tst/SimpleComponentTest.jsx
import { Simple } from "../src/SimpleComponent";
import { render } from "@testing-library/react";
import React from "react";

describe("SimpleComponent", () => {
  it("renders", () => {
    render(<Simple />);
  });
});

.babelrc

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

jest.config.js

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

package.json

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

Answer 1

Why does the stack trace for jest tests point to the wrong line numbers? How can I fix it?

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

我找到了三种解决此问题的方法:

1. 改变 <rootDir>/node_modules至 node_modules在你的 moduleDirectories

   为什么这样可以解决问题？

   • 如果<rootDir>被添加，开 Jest 或更准确地说是它的底层模块 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你会看到，它们都已经过时了: