Wednesday, 16 March 2022

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

When I run jest tests in my repo containing errors, the stack trace points to the wrong line numbers. This makes it very difficult to debug. For example:

Expected error

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

Received error

Note that it's pointing to the wrong line number - 34 instead of 6.

  ● SimpleComponent › renders

    ReferenceError: retur is not defined



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

My findings

I found that if I comment out the moduleDirectories entry in jest.config.js, then I get the expected error message. I don't understand why moduleDirectories has such an impact though.

However, I want to keep my moduleDirectories.

Question

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

Files

I have uploaded a minimal example in https://github.com/bluprince13/jest-wrong-line-numbers-in-stack-trace

Source

Note that return statement is spelt wrong.

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


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

No comments:

Post a Comment