Cannot use import statement outside a module

[aymkin]

Description

Default project can not run tests due to wrong jest config

CodeSandbox/Snack link

No response

Steps to reproduce

1. Run from terminal npm create gluestack
2. Select Mobile app (React Native + gluestack-ui), the rest can be dafault
3. cd my-app && npm run test
4. See error

❯ npm run test

> [email protected] test
> jest

 FAIL  __tests__/App.test.tsx
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • 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/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/aymkin/Projects/my-app/node_modules/@gluestack-ui/config/build/gluestack-ui.config.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { AnimationResolver } from '@gluestack-style/animation-resolver';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      14 | } from 'react-native';
      15 | import {Colors} from 'react-native/Libraries/NewAppScreen';
    > 16 | import {config} from '@gluestack-ui/config';
         | ^
      17 | import {GluestackUIProvider, Box, Text, Image} from '@gluestack-ui/themed';
      18 |
      19 | const FeatureCard = ({iconSvg, name, desc}: any) => {

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
      at Object.require (App.tsx:16:1)
      at Object.require (__tests__/App.test.tsx:7:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.238 s
Ran all test suites.

"@gluestack-style/react": "latest", 1.0.26 "@gluestack-ui/themed": "latest", 1.0.25 "@gluestack-ui/config": "latest", 1.0.8 "@legendapp/motion": "latest", 2.2.1

Expectation

I would expect that default cofig is configured to use latest Jest

gluestack-ui Version

latest

Platform

• [ ] Expo
• [X] React Native CLI
• [ ] Next
• [ ] Web
• [ ] Android
• [ ] iOS

Other Platform

No response

Additional Information

No response

[Gluant101]

Thanks for reporting the issue. We'll give an update soon.

[kk3939]

Thanks for reporting the issue. We'll give an update soon.

I used Expo and encountered this bug. I tried this way, but I can't fix.

https://github.com/gluestack/gluestack-ui/issues/1095

I'm looking forward to the updated version and advice to test with jest.

[2n2n]

I'm having the same issue, any luck? If there's a way to mock the config files this issue will go away.

[esteban-serfe]

I'm having the same issue... Any news on this front?

[cedricfressin]

Did you tried adding this to your Jest config:

    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|@gluestack-ui/*|@gluestack-style/*|@legendapp/*|react-native-svg)"
    ]

[ngcvm]

Hi, Is there any walkaround to fix this problem? I have tried using the Jest transformIgnorePatterns, but it didn't work.

[sbunking]

Can we please get some help with this? I'm encountering the same problem and transformIgnorePatterns fix doesn't work.