An error occurs every time i import 'react-icons/fa'.

[nabi-chan]

• @testing-library/react version: 9.3.2
• Testing Framework and version:
  • @testing-library/jest-dom : 4.2.4
  • jest : 24.9.0
• DOM Environment: (Generated CRA v3)
  • node : 12.16.2
  • react : 16.13.1

What you did:

add line import { ... } from react-icons/fa

What happened:

An error was indicated in the terminal as below.

FAIL  src/Jest.test.jsx
  ● 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:

    .../node_modules/react-icons/all.js:2
    export * from './fa';
    ^^^^^^

    SyntaxError: Unexpected token 'export'

    > 3 | import { MdMail, MdLock } from 'react-icons/all'
        | ^

Problem description:

Currently, I am practicing jest with CRA, and the error is showed only when importing 'react-icons/fa'.
However, when the list of other icons was called up, it passed the test normally without any errors.

[MatanBobi]

The code doesn't really match your description since your saying that you're importing from react-icons/fa but in the code you're importing from react-icons/all (importing from react-icons/fa actually works)..
This happens because react-icons is shipped as es2015 modules and jest doesn't support this yet.
Here are some references:
jestjs/jest#4842
jestjs/jest#2081
jestjs/jest#2550

To make it work you need to edit your jest config:

const esModules = ['react-icons'].join('|');
module.exports = {
  //...
    transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
  // ...
};

This one isn't related to RTL but to jest :)

[kentcdodds]

Thanks @MatanBobi!

[kentcdodds]

Hi @MatanBobi, added you as a triager thanks to all your contributions in the issues. Keep it up! Thank you :)

[MatanBobi]

Hi @MatanBobi, added you as a triager thanks to all your contributions in the issues. Keep it up! Thank you :)

Thanks @kentcdodds, I appreciate it :)