react-native - React Native 测试失败，缺少 babel 转换

Question

我想测试基于 default guides 创建的 React Native 应用程序，所以它很简单，没有任何变化 w.r.t.初始测试配置。唯一的区别似乎是它使用的是 npm而不是 yarn (所以它有一个 package-lock.json )。

这是package.json :

{
  "name": "foo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-gesture-handler": "^1.5.2",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "^1.10.3"
  },
  "devDependencies": {
    "@babel/core": "^7.7.4",
    "@babel/runtime": "^7.7.4",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.7.1",
    "jest": "^24.9.0",
    "license-checker": "^25.0.1",
    "metro-react-native-babel-preset": "^0.57.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

测试文件 __tests__/App-test.js非常简单(并且是自动生成的):

import 'react-native';
import React from 'react';
import App from '../App';

// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  renderer.create(<App />);
});

我收到此错误:

➜ npm test
> jest

 FAIL  __tests__/App-test.js
  ● 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:
     • 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:

    /node_modules/@foo/bar/src/main.js:24
    export function milliseconds(timeoutInMilliseconds) {
    ^^^^^^

    SyntaxError: Unexpected token 'export'

现在，我真的不明白为什么它不能“开箱即用”。 Other guides也提到相同的步骤。

添加 .babelrc和:

{ 
  "presets": ["react-native"]
}

产生错误:

Cannot find module 'babel-preset-react-native' from '/'
    - If you want to resolve "react-native", use "module:react-native"

      at Function.module.exports [as sync] (node_modules/resolve/lib/sync.js:74:15)
      at resolveStandardizedName (node_modules/@babel/core/lib/config/files/plugins.js:101:31)
      at resolvePreset (node_modules/@babel/core/lib/config/files/plugins.js:58:10)
      at loadPreset (node_modules/@babel/core/lib/config/files/plugins.js:77:20)
      at createDescriptor (node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
      at node_modules/@babel/core/lib/config/config-descriptors.js:109:50
          at Array.map (<anonymous>)
      at createDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
      at createPresetDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
      at presets (node_modules/@babel/core/lib/config/config-descriptors.js:47:19)

已经有 babel.config.js包含以下内容的文件(如建议的 here ):

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

我该怎么办？我见过 this question但是 React App 没有升级，也没有遗漏任何东西，AFAICT。请注意，当我使用 init 脚本创建一个全新的应用程序时，测试运行良好。

Answer 1

您正在使用 "react-navigation": "^4.0.10"使用 react-native-gesture-handler .杰斯对此一无所知。你必须 mock react-native-gesture-handler并添加 react-navigation至 transformIgnorePatterns或使用 react-native-jest-mocks .

一些 mock 的例子 react-native-gesture-handler可以在这里找到:https://github.com/software-mansion/react-native-gesture-handler/issues/344

添加 "files": ["jest/setup.js"],"内package.json .还有transformIgnorePatterns必须包括 react-navigation-stack , @react-native-community , react-native-gesture-handler和 react-navigation .
package.json :

"files": [
  "jest/setup.js"
],
"jest": {
  "preset": "react-native",
  "transform": {
    "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
  },
  "setupFiles": ["./jest/setup.js"],
  "testPathIgnorePatterns": [
    "/node_modules/"
  ],
  "transformIgnorePatterns": [
    "node_modules/(?!(jest-)?react-native|react-navigation-stack|@react-native-community|react-native-gesture-handler|react-navigation|@react-navigation/.*)"
  ]
}

jest/setup.js :

import { NativeModules as RNNativeModules } from "react-native";
RNNativeModules.UIManager = RNNativeModules.UIManager || {};
RNNativeModules.UIManager.RCTView = RNNativeModules.UIManager.RCTView || {};
RNNativeModules.RNGestureHandlerModule = RNNativeModules.RNGestureHandlerModule || {
  State: { BEGAN: "BEGAN", FAILED: "FAILED", ACTIVE: "ACTIVE", END: "END" },
  attachGestureHandler: jest.fn(),
  createGestureHandler: jest.fn(),
  dropGestureHandler: jest.fn(),
  updateGestureHandler: jest.fn(),

};
RNNativeModules.PlatformConstants = RNNativeModules.PlatformConstants || {
  forceTouchAvailable: false
};

jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');

现在运行 jest，它应该通过测试。我使用 react-navigation 创建了一个带有示例 RN 0.61 应用程序的存储库开玩笑测试通过了: https://github.com/clytras/RNJestTest

或者你可以试试 react-native-jest-mocks 但我还没有用 RN 0.61 尝试过。