CODEWITHSUNDEEP
javascriptreactjsunit-testingjestjsreact-testing-library
nodenobounds
nodenobounds

Reputation: 25

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

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.

Upvotes: 1

Views: 2435

Answers (2)

NovalisBarrister
NovalisBarrister

Reputation: 81

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.

Upvotes: 0

Weder Ribas
Weder Ribas

Reputation: 359

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.

Upvotes: 1

Related Questions