React + Jest: test hangs forever whenever I try to access DOM properties (i.e.: toHaveStyle)

huangapple go评论61阅读模式
英文:

React + Jest: test hangs forever whenever I try to access DOM properties (i.e.: toHaveStyle)

问题

For the past few months, my tests have been working perfectly. My package versions are fixed, not ranges, and we have not updated any dependency. However, since three days ago, the tests won't run at all. Jest just hangs in the [RUNS] myTests/file.spec.tsx forever (I've waited more than 10 minutes).

I've got a timeout set to 10000ms (10s), but even reaching that timeout won't make the test fail. It's like it's stuck before even starting to execute the tests.

This has been detected in a CI Pipeline, and after deleting node_modules and re-installing again locally, it happens in my local environment too.

After some troubleshooting, I've been able to reproduce it in a newly created test file, and it always happens when I add an expect accessing the DOM properties, such as toHaveStyle:

const placeholder = screen.getByTestId('floating-placeholder');

expect(placeholder).toBeInTheDocument(); // This works
expect(placeholder).toHaveStyle({ top: '13px' }); // As soon as I write this line, the tests hang forever

What I've tried

I don't know what to do because the only thing I can think of is library versions, but we haven't updated any of our dependencies in the last months. Furthermore, I've updated the versions of RTL (jest-dom, user-event, etc.) and Jest to test, and it hasn't worked.

Using the --verbose flag in Jest script shows that the process is stuck in this line forever:

npm timing npm:load Completed in 42ms (the "42ms" number changes very quickly all the time, like a chrono, but it never gets past there).

I've also looked for changes in libraries like jest-dom and so on just in case some other library with peer dependencies could have updated it, but there's been no update either.

System versions

  • NPM: 7.21.0
  • Node: 16.8.0
  • @testing-library/jest-dom: 5.16.4
  • @testing-library/react: 13.1.1
  • @testing-library/user-event: 13.5.0
  • react: 18.0.0
  • fetch-mock-jest: 1.5.1
  • typescript: 4.6.3
  • @types/jest: 29.4.0

Application was created with the create-react-script util.

The question

What could I do to try to spot why is it failing all of a sudden?

Thank you!

英文:

For the past few months my tests have been working perfectly. My package versions are fixed, not ranges, and we have not updated any dependency. However, since three days ago, the tests won't run at all. Jest just hangs in the [RUNS] myTests/file.spec.tsx forever (I've waited more than 10 minutes).

I've got a timeout set to 10000ms (10s), but even reaching that timeout won't make the test to fail. It's like it's stuck before even starting to execute the tests.

This has been detected in a CI Pipeline, and after deleting node_modules and re-installing again locally, it happens in my local environment, too.

After some troubleshooting, I've been able to reproduce it in a newly created test file, and it always happens when I add an expect accessing the DOM properties, such as toHaveStyle:

const placeholder = screen.getByTestId('floating-placeholder');

expect(placeholder).toBeInTheDocument(); // This works
expect(placeholder).toHaveStyle({ top: '13px' }); // As soon as I write this line, the tests hangs forever

What I've tried

I don't know what to do because the only thing I can think of is library versions, but we haven't updated any of our dependencies in the last months. Furthermore, I've updated the versions of RTL (jest-dom, user-event, etc.) and Jest to test, and it hasn't worked.

Using the --verbose flag in Jest script shows that the process is stuck in this line forever:

npm timing npm:load Completed in 42ms (the "42ms" number changes very quickly all the time, like a chrono, but it never gets past there).

I've also looked for changes in libraries like jest-dom and so on just in case some other library with peer dependencies could have updated it, but there's been no update either.

System versions

  • NPM: 7.21.0
  • Node: 16.8.0
  • @testing-library/jest-dom: 5.16.4
  • @testing-library/react: 13.1.1
  • @testing-library/user-event: 13.5.0
  • react: 18.0.0
  • fetch-mock-jest: 1.5.1
  • typescript: 4.6.3
  • @types/jest: 29.4.0

Application was created with the create-react-script util.

The question

What could I do to try to spot why is it failing all of a sudden?

Thank you!

答案1

得分: 0

下降版本@testing-library/jest-dom5.16.45.16.3并进行干净安装似乎解决了问题,现在所有测试都在CI流水线中以绿色运行。这两个版本的变更日志唯一的区别是这个单一的修复项:

支持未封闭的详细元素内文本以可见
(#396) (af18453)

这不应该对我的项目中此版本的测试行为产生任何影响。但不知何故,它似乎确实有影响。

英文:

Well, I don't know why it suddenly stopped working. I don't know why, either, this seems to fix it. But downgrading the version of @testing-library/jest-dom from 5.16.4 to 5.16.3 and making a clean install seems to fix it, and now all tests are running in green, even in the CI pipeline.

The only difference in the changelog from these two versions is this single fix:

> Support unenclosed inner text for details elements in to be visible
> (#396) (af18453)

Which should not affect at all at how the tests are behaving with this version in my project. But it seems, somehow, it does.

huangapple
  • 本文由 发表于 2023年4月13日 15:28:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/76002740.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定