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

Posted

技术标签:

【中文标题】Jest 遇到了带有 react-native 的意外令牌【英文标题】:Jest encountered an unexpected token with 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"]]
    
  

【问题讨论】:

【参考方案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": []

【讨论】:

以上是关于Jest 遇到了带有 react-native 的意外令牌的主要内容,如果未能解决你的问题,请参考以下文章

如何在 React-Native 项目中使用 Jest 测试样式化组件?

react-native, jest, ts-jest: ReferenceError: React is not defined

React Native - JEST:没有找到 haste.hasteImplModulePath 选项中的 react-native/jest/hasteImpl.js

意外的导入令牌 - 使用 Jest 测试 React Native

React-Native 应用程序的 Jest 测试 Animated.View

使用 Jest 在 React-Native 中测试组件行为(点击)