Test suite fails to run because of an error in pure.js using react-testing-library/react-hooks

Question

I am testing a react app with the react-testing-library. To use renderhooks, I had to add the '@testing-library/react-hooks' library. This library depends on another library "pure.js". Running tests that makes use of renderhooks in vscode works fine but shows and error in a web IDE.

Test suite failed to run

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

/projects/challenge/node_modules/@testing-library/react-hooks/lib/pure.js:41
  } catch {
          ^

SyntaxError: Unexpected token {

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at Object.<anonymous> (node_modules/@testing-library/react-hooks/lib/index.js:11:13)

How do one get around this error?

Answer 1

The try/catch is a modern JavaScript feature and supported since Node version 10. Try to update Node.js if your version is < 10

Please also see this answer here: https://stackoverflow.com/a/62971606/1108161

Answer 2

Ok, so look at the documentation here .

Sometimes it happens (especially in React Native or TypeScript projects) that 3rd party modules are published as untranspiled. Since all files inside node_modules are not transformed by default, Jest will not understand the code in these modules, resulting in syntax errors. To overcome this, you may use transformIgnorePatterns to allow transpiling such modules. You'll find a good example of this use case in React Native Guide.

Your error message states that Jest has found code it can't understand, and is suggesting that you transform it. It also says that the code it can't understand is in node_modules/@testing-library .
However, the default value for transformIgnorePatterns is ["/node_modules/", "\\.pnp\\.[^\\\/]+$"] , which means that the node_modules folder will not be transformed. To allow jest to transform the folder, you need to change the transformIgnorePatterns value to something else that includes the file Jest can't understand. That could eg be something like

"transformIgnorePatterns": [
  "node_modules/(?!(@testing-library)/)"
]