I have the following error when I run yarn test
:
lerna ERR! yarn run test:unit stderr: FAIL id-check-front src/tests/App.test.tsx ● 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: • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it. • 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: /home/dka/workspace/github.com/pass-culture/id-check-front/node_modules/react-native-svg-web/index.js:23 import * as React from "react"; ^^^^^^ SyntaxError: Cannot use import statement outside a module 1 | import * as React from 'react' > 2 | import Svg, { Path } from 'react-native-svg' | ^ 3 | import { IconProps, mapIconPropsToSvgProps } from './types' 4 | 5 | function AlertFilled(props: IconProps) { at Runtime.createScriptFromCode (../../../node_modules/jest-runtime/build/index.js:1350:14) at Object.<anonymous> (../../../packages/id-check/src/components/icons/AlertFilledIcon.tsx:2:1)
My jest.config.js
:
moduleNameMapper: { '^react-native$': 'react-native-web', '^react-native-modal$': 'modal-enhanced-react-native-web', + '^react-native-svg$': 'react-native-svg-web', }, transformIgnorePatterns: [ 'node_modules/(?!(jest-)?react-native' + '|@react-navigation' + '|@ptomasroos/react-native-multi-slider' + '|react-navigation' + '|@react-native-community/masked-view' + '|@react-native-community' + '|react-navigation' + '|@react-navigation/.*' + '|@unimodules/.*' + '|unimodules' + '|sentry-expo' + '|native-base' + '|@sentry/.*' + '|native-base-*' + '|@react-native-firebase/analytics' + '|@react-native-firebase/app' + '|@react-native-firebase/remote-config' + '|@sentry/react-native' + '|react-native-geolocation-service' + '|@react-native/polyfills' + + '|react-native-svg' + + '|react-native-svg-web)' ],
I expect when babel to transpile what’s in node_modules/react-native-svg-web
.
Instead, babel does not transpile and I have the casual transpilation error for dependencies that are not transformed: SyntaxError: Cannot use import statement outside a module
Why is the transformation not working? How can I test my web app that use react-native-svg-web
without issues?
Advertisement
Answer
Your jest.config.js
looks good to me. You may want to check that you are also mapping your .js
files to a transformer.
For example, if you are using TypeScript, the transform
property of your jest.config.js
should look like :
transform: { '^.+\.(ts|tsx|js)$': 'ts-jest', },