Question

我想测试我基于this创建的React Native应用程序，所以它非常简单并且没有任何更改。初始测试配置。唯一的区别似乎是它使用的是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'

现在，我真的不明白为什么它不能“开箱即用”。 default 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文件，其中包含以下内容（建议Other guides）：

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

我该怎么办？我见过here，但是React App尚未升级，并且没有丢失任何内容，AFAICT。请注意，当我使用初始化脚本创建一个全新的应用程序时，测试运行正常。

Answer 1

您正在使用"react-navigation": "^4.0.10"的{{1}}。笑话对此一无所知。您必须模拟react-native-gesture-handler并将react-native-gesture-handler添加到react-navigation或使用react-native-jest-mocks。

可以在这里找到一些嘲笑transformIgnorePatterns的示例：https://github.com/software-mansion/react-native-gesture-handler/issues/344

在react-native-gesture-handler内添加"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');创建了一个带有示例RN 0.61应用程序的存储库，该应用程序具有通过测试的笑话：https://github.com/clytras/RNJestTest

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

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

1 个答案: