Importing 'render' from @testing-library/react in a jsx file is erroring out

Question

a little stuck on this one. I'm introducing react unit testing into my teams node/react project. We've had jest unit tests for our backend and utils in FE for a long time but no react testing.

I'm following the testing guide via https://redux.js.org/recipes/writing-tests

My issue is that, I've created the test file the exact same way all our other unit tests are created and running properly. I've put a fake test case in the file:

import React from 'react';
//import { render } from '@testing-library/react';

describe('test', () => {
  it('tests', () => {
    expect(true).toEqual(true);
  });
});

And this test case executes as expected. However, as soon as I uncomment the import { render } line, it's breaking on the following error:

 FAIL  */__tests__/client/views/components/componentToTest.test.jsx
  ● Test suite failed to run

    */node_modules/@testing-library/dom/dist/helpers.js:44
        } catch {// not using Jest's modern fake timers
                ^
    
    SyntaxError: Unexpected token {
      
      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (node_modules/@testing-library/dom/dist/pretty-dom.js:13:16)
      at Object.<anonymous> (node_modules/@testing-library/dom/dist/config.js:11:18)

At a total loss for what's going on here, can't find anyone w/ a similar issue. My IDE even correctly shows me what the render method looks like, so I know its importing properly.

I've installed all of the packages suggested in the guide, and obviously have jest config'd to run jsx files (since the test works, but just breaks on the import)

An answer would be great, but really would love to just be pointed in the right direction of how to resolve this as well.

Thanks!

Also worth noting, I have babel-jest and jest-dom setup, as I know thats the answer to a lot of similar issues.

I have the same issue when tests were running on node v8.17.0. On Node v10 and v13 all work. — Nikolai Borisik
– Nikolai Borisik, Commented Jul 7, 2020 at 10:47
Oh you're actually 100% right. Yesterday, I was ripping my hair out on this one all day. Finally, my machine ended up crashing, and when I loaded it back up again it was working. I was super confused, but just realized now thanks to your comment that yesterday I was running v8.7.0 as I had to deploy a service that uses that version earlier, and never switched back to v10. When my computer crashed, it reset my version back to v10, which is why its running properly. Good call here, thank you. How did you figure out it was a versioning issue w/ node itself? — nodenobounds
– nodenobounds, Commented Jul 7, 2020 at 15:57

Weder Ribas · Accepted Answer · 2020-07-10 00:58:50Z

1

The issue here is that optional catch bindings in JavaScript (when you declare a catch block without binding an error: try {} catch {} instead of try {} catch(error) {}) only works on Node V10+.

Additionally, testing library supports Node V10+.

To get around it, you need to run the tests on Node V10+ and make sure to setup babel to use the current node version in your system, with the proper transforms.

Check out the Jest documentation for more information.

P.S.: you can find more info about this issue here.

answered Jul 10, 2020 at 0:58

Weder Ribas

3596 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nodenobounds Over a year ago

Sincerest apologies for the lag on accepting this answer. This was it, thanks for the answer and additional context.

NovalisBarrister · Accepted Answer · 2020-07-16 18:29:18Z

0

So it looks like Babel needs to transform the js files in /node_modules/@testing-library and in your case its not doing that. I suspect that your your jest config (either defined in package.json or in jest.config.js) needs to be fixed so that babel does indeed transform those files.

A quick fix would be to set transformIgnorePatterns as an empty array. By default transformIgnorePatterns is set to "/node_modules/" and setting it to an empty array would stop the node_module files from being ignored So it could be something like this.

...
"transform": {
  "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
  "^.+\\.(css|styl|less|sass|scss)$": "<rootDir>/node_modules/jest-css-modules-transform"
},
"transformIgnorePatterns": [],
....

The problem with this solution is that all the files in node_modules will be transformed and this could make the test run slow. A better solution would be to set transformIgnorePatterns to a regex pattern that includes all node_modules files EXCEPT @testing-library. I'm not an expert on regex so I'll leave you to figure that out.

answered Jul 16, 2020 at 18:29

NovalisBarrister

811 silver badge4 bronze badges

1 Comment

NovalisBarrister Over a year ago

So it looks like this regex pattern for "transformIgnorePatterns" worked "[/\\\\]node_modules[/\\\\][^@testing-library/].+\\.(js|jsx)$",

Collectives™ on Stack Overflow

Importing 'render' from @testing-library/react in a jsx file is erroring out

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related