title: SyntaxError: Cannot use import statement outside a module, how to run test unit with react-native-svg for the Web?
body: <p>I have the following error when I run <code>yarn test</code>:</p>
  <pre class="lang-rb prettyprint-override"><code>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 &quot;node_modules&quot;.
  
      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 &quot;node_modules&quot; files transformed, you can specify a custom &quot;transformIgnorePatterns&quot; in your config.
       • If you need a custom transformation specify a &quot;transform&quot; 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 &quot;moduleNameMapper&quot; 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 &quot;react&quot;;
      ^^^^^^
  
      SyntaxError: Cannot use import statement outside a module
  
        1 | import * as React from 'react'
      &gt; 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.&lt;anonymous&gt; (../../../packages/id-check/src/components/icons/AlertFilledIcon.tsx:2:1)
  </code></pre>
  <p>My <code>jest.config.js</code>:</p>
  <pre><code>  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)'
    ],
  </code></pre>
  <p>I expect when babel to transpile what's in <code>node_modules/react-native-svg-web</code>.</p>
  <p>Instead, babel does not transpile and I have the casual transpilation error for dependencies that are not transformed: <code>SyntaxError: Cannot use import statement outside a module</code></p>
  <p>Why is the transformation not working? How can I test my web app that use <code>react-native-svg-web</code> without issues?</p>