Jest 遇到了带有 react-native 的意外令牌答案

【问题标题】：Jest encountered an unexpected token with react-nativeJest 遇到了带有 react-native 的意外令牌
【发布时间】：2019-02-10 18:47:42
【问题描述】：

所以我正在尝试使用 Jest 和 TypeScript 在我的 React Native 应用程序上编写测试。虽然使用旧的 babel 版本一切正常，但由于一些项目问题，我们不得不将 babel 升级到 7.0.0。之后我无法让它工作。任何帮助表示赞赏

Jest 遇到了意外的令牌这通常意味着您正在尝试导入 Jest 无法解析的文件，例如它不是纯 JavaScript。默认情况下，如果 Jest 看到 Babel 配置，它将使用它来转换您的文件，忽略“node_modules”。

/home/levan/work/vabaco-dhp-frontend/packages/dhp-mobile-app/node_modules/react-native-calendar-events/index.ios.js:3 从 'react-native' 导入 { NativeModules };

SyntaxError: 意外的令牌导入

package.json：

"dependencies": {
    "react": "16.4.1",
    "react-native": "0.56.0",
    "react-native-calendar-events": "^1.6.1",
    "react-redux": "^5.0.7",
    "react-router": "^4.3.1",
    "react-router-native": "^4.3.0",
    "react-router-redux": "5.0.0-alpha.9",
    "redux": "^4.0.0",
    "redux-api-middleware": "^2.3.0",
    "redux-form": "^7.4.2",
    "redux-thunk": "^2.3.0",
    "urijs": "^1.19.1"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@types/history": "^4.7.0",
    "@types/jest": "^23.3.1",
    "@types/react": "^16.4.13",
    "@types/react-native": "^0.56.17",
    "@types/react-router": "^4.0.30",
    "@types/react-router-native": "^4.2.3",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^23.4.2",
    "babel-loader": "^8.0.2",
    "babel-preset-react-native": "^5.0.0",
    "jest": "^23.5.0",
    "react-native-typescript-transformer": "^1.2.10",
    "react-test-renderer": "^16.4.2",
    "ts-jest": "^23.1.4",
    "typescript": "^3.0.3"
},


"jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.ts?$": "ts-jest",
      "^.+\\.tsx?$": "ts-jest",
      "^.+\\.js$": "babel-jest"
    },
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)?$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "moduleNameMapper": {
      "^.+\\.(css|less|scss)$": "identity-obj-proxy"
    },
    "transformIgnorePatterns": [
      "/node_modules/(?!(react-native|my-project|react-native-button|react-native-calendar-events)/)"
    ]
  }

babelrc:

{
  "presets": ["react-native", ["@babel/preset-env", {"modules": "commonjs"}]],
  "env": {
    "test": {
      "presets": ["react-native", ["@babel/preset-env"]]
    }
  }
}

【问题讨论】：

标签： javascript typescript react-native jestjs

【解决方案1】：

找到了解决办法。在转换中你应该使用 react-native/jest/preprocessor.js 而不是 babel-jest。

"jest": {
    "preset": "react-native",
    "moduleDirectories": [
      "node_modules",
      "src"
    ],
    "transform": {
      "^.+\\.ts?$": "ts-jest",
      "^.+\\.tsx?$": "ts-jest",
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js" <--- over here
    },
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)?$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "moduleNameMapper": {
      "^.+\\.(css|less|scss)$": "identity-obj-proxy"
    },
    "transformIgnorePatterns": []
}

【讨论】：