SyntaxError: Cannot use import statement outside a module, how to run test unit with react-native-svg for the Web?

Question

我在运行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)

我的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)'
  ],

我希望 babel 转译 node_modules/react-native-svg-web.

中的内容

相反，babel 不转译，我遇到了未转换的依赖项的偶然转译错误：SyntaxError: Cannot use import statement outside a module

为什么转换不起作用？如何测试使用 react-native-svg-web 的网络应用程序而不会出现问题？

Answer 1

我觉得你的 jest.config.js 不错。您可能需要检查您是否也将 .js 文件映射到转换器。

例如，如果您使用的是 TypeScript，则 jest.config.js 的 transform 属性应如下所示：

transform: {
    '^.+\.(ts|tsx|js)$': 'ts-jest',
},

SyntaxError: Cannot use import statement outside a module, how to run test unit with react-native-svg for the Web?

SyntaxError: Cannot use import statement outside a module, how to run test unit with react-native-svg for the Web?

javascript

reactjs

jestjs

babeljs

react-native