Run Jest with components using @react-native-community/art

[hectorsuarezm]

I'm probably missing something, because I don't see this question anywhere in stack overflow or any other place. I'm trying to run Jest in a component and in the app we use '@react-native-community/art' but I'm receiving an unexpected token exception.

` ● 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:

/Users/............./node_modules/@react-native-community/art/lib/index.js:10
export {default as Transform} from 'art/core/transform';
^^^^^^

SyntaxError: Unexpected token 'export'`

Have anyone experienced this before ?

[christophemenager]

I have the same issue

[mikaoelitiana]

I had the same issue and created the file __mocks__/@react-native-community/art.js with the following content mocking component I use from ART :

export const Surface = () => null;
export const Shape = () => null;

[pradel]

I was able to fix this issue using the jest transformIgnorePatterns option.

// jest.config.js

module.exports = {
  preset: 'react-native',
  // ... other configs
  "transformIgnorePatterns": [
    // Add @react-native-community/art to the list
    "node_modules/(?!(react-native|@react-native-community/art)/)"
  ]
};

[krakzk]

"node_modules/(?!(jest-)?react-native|react-(native|universal|navigation)-(.)|@react-native-community/(.)|@react-navigation/(.*))"

Can use in case of multiple modules, works perfect