使用Jest测试React Native时，Jest遇到了意外的标记。

Question

我想在我的react-native项目中使用jest。我对jest和react-native都很陌生，目前遇到以下错误：

Details:

/Users/sachigrannan/SKO/Alpha4-1/node_modules/react-native-iphone-x-helper/index.js:1
import { Dimensions, Platform, StatusBar } from 'react-native';
       ^

SyntaxError: Unexpected token {

  at Runtime._execModule (node_modules/jest-runtime/build/index.js:1157:58)
  at Object.<anonymous> (node_modules/react-navigation-stack/lib/commonjs/vendor/TransitionConfigs/CardStyleInterpolators.tsx:2:1)

我已在 package.json 中进行了设置。请帮忙！

"jest": {
    "verbose": true,
    "preset": "react-native",
    "cacheDirectory": "./cache",
    "coveragePathIgnorePatterns": [
      "./app/utils/vendor"
    ],
    "coverageThreshold": {
      "global": {
        "statements": 80
      }
    },
    "transformIgnorePatterns": [
      "node_modules/(?!(react-native|my-project|react-native-button|nodejs-mobile-react-native|react-navigation)/)"
    ]
  }

- Sachi Grannan

---

你找到解决方案了吗？ - chetan

我有同样的问题，但我使用react-native-web和react-navigation。 - Dimitri Kopriwa

有人知道如何解决这个问题吗？ - lreddy

Answer 1

假设在引入该库之前，您的 transformIgnorePatterns 已经起作用了，那么解决方法就是将 "react-native-iphone-x-helper" 添加到 "transformIgnorePatterns" 属性中即可。

"node_modules/(?!(react-native|my-project|react-native-button|nodejs-mobile-react-native|react-navigation|react-native-iphone-x-helper)/)"

话虽如此，你最好只是删除“transformIgnorePatterns”，让"preset": "react-native"配置自己完成工作。

我遇到的唯一问题是在嵌套的node_module目录中有未转译的依赖项时，例如：

/path/to/myproject/node_modules/@react-navigation/bottom-tabs/node_modules/react-native-iphone-x-helper/index.js:1
    import { Dimensions, Platform, StatusBar } from 'react-native';
           ^

在这种情况下，问题是另一个模块使用了不同版本的react-native-iphone-x-helper，所以我必须更新该依赖项以使它们保持一致。如果这不可行，你可以使用yarn的resolutions字段。

- sindre