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

Question

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

预期错误

  ● 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)

我的发现

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

但是，我想保留我的moduleDirectories。

问题

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

文件

我已经在 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

我相信有一个错误，它也会计算空行。

我从 Github 上的未解决问题中找到的一个解决方案 - 从 jest.config.js 中删除 "<rootDir>/src"。一定要养吗？

Answer 2

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

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

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

正在将您的 <rootDir>/node_modules 更改为 node_modules moduleDirectories

为什么这样可以解决问题？
- 如果添加了<rootDir>，开玩笑，或者更准确地说，它的底层模块 source-map-support 使用 node_modules/source-map 中的 source_map 模块。在我的例子中，对于您的示例的全新安装，是 0.7.3。但是 source_map_support 依赖于 ^0.6.0。它实际上在 node_modules/source-map-support/source-map 下带来了正确的版本。但是由于某些原因，指定了 <rootDir>，它不能再访问它了。这将我们带到了第二个解决方案。
通过手动将 source-map 模块降级为 ^0.6.0 作为项目的依赖项。在这种情况下，node_modules/source-map 将再次提供正确的版本，但这可能会破坏其他内容，因为不清楚这个错误版本的来源。
将您的项目依赖项升级到最新版本。试试 npm outdated 你会发现它们都过时了：

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

Why does the stack trace for my jest tests point to the wrong line numbers?

javascript

reactjs

jestjs

babeljs

babel-jest

预期错误

收到错误

我的发现

问题

文件