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

【问题标题】：Why does the stack trace for my jest tests point to the wrong line numbers?为什么我的笑话测试的堆栈跟踪指向错误的行号？
【发布时间】：2022-08-18 15:44:50
【问题描述】：

当我在包含错误的 repo 中运行 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)

我的发现

我发现如果我注释掉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\"
  }
};

包.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\"
    }
}

您是否尝试过颠倒 moduleDirectories 中的顺序
它指向错误的线，在某种程度上与源地图有关。对我来说，如果我删除 <rootDir> 字符串令牌，它似乎有效
\"<rootDir>/node_modules\",=> \"node_modules\",

标签： javascript reactjs jestjs babeljs babel-jest

【解决方案1】：

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

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

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

将您的 <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，你会发现它们都已经过时了：

【讨论】：

【解决方案2】：

确保您的 tsconfig.json 具有 sourceMap: true

【讨论】：

【解决方案3】：

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

我从 Github 上的一个未解决问题中找到的一种解决方案 - 从 jest.config.js 中删除 "<rootDir>/src"。是否必须保留它？

【讨论】：

什么空行？该文件中没有 34 行。是的，我已经知道 moduleDirectories 条目导致了这个问题。我想了解为什么以及是否有其他方法可以解决它。