Loading React Native: UnhandledPromiseRejectionWarning: Error: Cannot find module 'View'

Question

我正在尝试为测试库做贡献。该库应该为 react-test-renderer like react-native-testing-library 提供一个包装器。

为了查看我的代码是否有效，我使用我为库编写的代码编写了一个简单的单元测试。由于这是 React Native 的第一个测试，我添加了 react-native 作为开发依赖项以及 metro-react-native-babel-preset。此外，我将预设添加到 babel.

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": ["last 2 versions", "safari >= 7"]
        }
      }
    ],
    "react",
    "module:metro-react-native-babel-preset"
  ]
}

库使用 tape 进行断言。

现在，每个测试 (npm test) 都会抛出错误：

> node -r babel-register -r babel-polyfill source/test
/path/to/node_modules/babel-core/lib/transformation/file/options/option-manager.js:328
        throw e;
        ^

Error: Couldn't find preset "module:metro-react-native-babel-preset" relative to directory

当我从 babel 配置中删除预设时，出现错误：

(node:1841) UnhandledPromiseRejectionWarning: Error: Cannot find module 'View'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.get View [as View] (/path/to/node_modules/react-native/Libraries/react-native/react-native-implementation.js:165:12)
    at _callee7$ (/path/to/source/test.js:110:6)
    at tryCatch (/path/to/node_modules/babel-polyfill/node_modules/regenerator-runtime/runtime.js:65:40)
    at Generator.invoke [as _invoke] (/path/to/node_modules/babel-polyfill/node_modules/regenerator-runtime/runtime.js:303:22)
    at Generator.prototype.(anonymous function) [as next] (/path/to/node_modules/babel-polyfill/node_modules/regenerator-runtime/runtime.js:117:21)
    at step (/path/to/source/test.js:27:191)
(node:1841) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)
(node:1841) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
not ok 10 test exited without ending
  ---
    operator: fail
    at: process.<anonymous> (/path/to/node_modules/tape/index.js:90:19)
    stack: |-
      Error: test exited without ending
          at Test.assert [as _assert] (/path/to/node_modules/tape/lib/test.js:226:54)
          at Test.bound [as _assert] (/path/to/node_modules/tape/lib/test.js:77:32)
          at Test.fail (/path/to/node_modules/tape/lib/test.js:319:10)
          at Test.bound [as fail] (/path/to/node_modules/tape/lib/test.js:77:32)
          at Test._exit (/path/to/node_modules/tape/lib/test.js:191:14)
          at Test.bound (/path/to/node_modules/tape/lib/test.js:77:32)
          at process.<anonymous> (/path/to/node_modules/tape/index.js:90:19)
          at process.emit (events.js:194:15)

如何在库中（以及 expo init 或 react-native init 项目之外的测试中将 React Native 组件添加到运行？

编辑： 我发现 repo 使用的是 Babel 6，这就是 metro 预设似乎不起作用的原因。所以我把它换成了 babel-preset-react-native 现在我又回到了最初的错误 View 找不到。

编辑 2： package.json

  "scripts": {
    "lint": "eslint source && echo 'Lint complete.'",
    "typecheck": "npx -p typescript tsc --rootDir . source/test.js --allowJs --checkJs --noEmit --lib es6 --jsx react && echo 'TypeScript check complete.'",
    "ts": "npm run -s typecheck",
    "test": "node -r babel-register -r babel-polyfill source/test",
    "watch": "watch 'clear && npm run -s test | tap-nirvana && npm run -s lint && npm run -s typecheck' source",
    "precommit": "npm run -s test && npm run -s lint && npm run -s typecheck"
  },
  "devDependencies": {
    "@types/node": "10.12.27",
    "babel-cli": "6.26.0",
    "babel-eslint": "10.0.1",
    "babel-preset-env": "1.7.0",
    "babel-preset-react": "6.24.1",
    "babel-preset-react-native": "4.0.1",
    "babel-register": "6.26.0",
    "eslint": "5.14.1",
    "eslint-plugin-react": "7.12.4",
    "react": "16.8.3",
    "react-native": "0.58.5",
    "tap-nirvana": "1.1.0",
    "typescript": "3.3.3333",
    "watch": "1.0.2"
  },
  "dependencies": {
    "cheerio": "1.0.0-rc.2",
    "esm": "3.2.6",
    "react-dom": "16.8.3",
    "react-test-renderer": "16.8.3",
    "tape": "4.10.1"
  }

编辑 3： 抱歉，显然我没有包含我的代码，尽管它有助于解决这个问题。这是非常基本的。我只是想使用 ReactTestRenderer.

渲染 <View />

import TestRenderer from 'react-test-renderer';
import { Text, View } from 'react-native';
import { describe } from 'riteway';

describe('renderReactNativeComponent', async assert => {
  const text = 'Foo';
  const component = TestRenderer.create(
    <View>
      <Text>{text}</Text>
    </View>
  );
  console.log(Text);

  assert({
    given: 'A React Native component',
    should: 'return a working react test renderer instance',
    actual: component.findByType('text'),
    expected: text
  });
});

Answer 1

删除节点模块并重新安装

rm -rf node_modules
npm install

Answer 2

你没有return任何东西，你需要return一个"View"

Answer 3

您可能只想使用 https://reactjs.org/docs/test-renderer.html just to make sure nothing wrong with code you have written, then add up your own logic to improve it (Just an idea to debug it). May be add it up in https://snack.expo.io 中建议的示例？或者github，我帮你调试

Answer 4

根据 docs，“从 react-native 版本 0.38 开始，运行ning react-native init 时默认包含 Jest 设置。”.

和

"react-native ships with a Jest preset, so the jest.preset field of your package.json should point to react-native. The preset is a node environment that mimics the environment of a React Native app. Because it doesn't load any DOM or browser APIs, it greatly improves Jest's startup time."

重点是 Jest 应该与 React-Native 一起工作，而 riteway 不是。当您运行 react-native init 时，将添加以下依赖项："jest-react-native"。并在 package.json 中添加了一个笑话预设：

"jest": {
   "preset": "react-native"
}

显然还没有任何 riteway 的预设。

Loading React Native: UnhandledPromiseRejectionWarning: Error: Cannot find module 'View'

Loading React Native: UnhandledPromiseRejectionWarning: Error: Cannot find module 'View'

javascript

tap

babeljs

react-native

babel-polyfill