react-native-elements
Testing with Jest - SyntaxError: Cannot use import statement outside a module
Is there an existing issue for this?
- [X] I have searched the existing issues
Explain what you did
Trying to test my app with Jest. I'm having a button imported from rneui. import {Button} from '@rneui/themed';
Expected behavior
The Jest test to pass.
Describe the bug
`Details:
/Users/ilirbajrami/Desktop/MoneyliaApp/node_modules/@rneui/themed/dist/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { AirbnbRatingDefault as AirbnbRating, } from './AirbnbRating';
^^^^^^
SyntaxError: Cannot use import statement outside a module`
If i delete the button or import it from react-native the test passes.
Steps To Reproduce
import button from `@rneui/themed` and try to test the component where the button is imported.
Screenshots
Your Environment
`npx @rneui/envinfo`
```
## Local Dependencies:
- @rneui/base : ^4.0.0-rc.7
- @rneui/themed : ^4.0.0-rc.7
- react : 18.1.0
- react-native : 0.70.6
- @types/react : ^18.0.21
- @types/react-native : ^0.70.6
Usually, when you get this kind of errors, it's due to the jest setup. You should have a config file somewhere (jest.config.js for example), in there add @rneui:
transformIgnorePatterns: [
'node_modules/(?!((jest-)?react-native(-.*)?|@react-native(-community)?|@rneui)/)'
],
Like @Alaa-Ben mentioned; jest requires that you set transformIgnorePatterns for libraries that need to be transformed by babel.
As already proposed; I fixed this by adding @rneui to the transformIgnorePatterns list.
After adding @rneui still I am getting this error. Here is the screenshot for the issue and also the code that I am using in package.json
"transformIgnorePatterns": [ "/node_modules/(?!(react-native|@react-native|@react-navigation|react-native-reanimated|@rneui)/)" ]
The non transformed module seemed to be react-native-size-matters as a rule of thumb, I transformed using a regex every react-native-* package so try something like:
transformIgnorePatterns: [
'node_modules/(?!((jest-)?react-native(-.*)?|@react-native(-community)?|@react-navigation|@rneui)/)'
],
This error coming again and again , neither the proper solution is found nor this error is gone. If anyone knows the solution please let me know.
In my case even adding in the transformIgnorePattern the error didn't change
