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

Question

当我在包含错误的回购中运行嘲笑测试时，堆栈跟踪指向错误的行号。这使得很难调试。例如：

指示错误

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

我的发现

i发现，如果我在

jest.config.js中评论Moduledirectories

输入，那么我会收到预期的错误消息。我不明白为什么

moduleDirectories

为什么会产生如此影响。

，但是，我想保留我的

moduleDirectories

。

问题

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

files

我在

https：//github.com/bluprince13/jest-wrong-line-numbers-in-numbers-in-in-stack-trace

中上传了一个最小示例

Source

注意

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>
  );
};

 -Test

// 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

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

改变在您的

<rootDir>/node_modules

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

1. 如果添加了， 开玩笑或更精确的其基础模块

   node_modules

   使用

   moduleDirectories

   <rootDir>

   模块。在我的情况下，您的示例的全新安装是
   source-map-support

   。但是

   source_map
   依赖于
   • node_modules/source-map

     。它实际上将正确的版本带入了

     0.7.3

     。但是由于某种原因，指定了

     source_map_support

     ，它无法再访问它。这使我们进入了第二个解决方案。
     

     将

     ^0.6.0

     decondrade to to to to to通过手动将其作为项目的依赖性。在这种情况下，

     node_modules/source-map-support/source-map

     将再次提供正确的版本，但这可能会破坏其他内容，因为这不清楚，此错误的版本源自哪里。
     

     将您的项目依赖性限制为最新版本。 尝试

     <rootDir>

     ，您会看到，它们都过时了：

2. i也有同样的问题，我通过在tsconfig.json中生成sourcemaps（此选项已禁用）：source-map

3. 我相信有一个错误，它也很重要。

   我是从github上的一个开发问题中找到的一种解决方案 - 从

   ^0.6.0中删除node_modules/source-map。保留它是必须的吗？