我正在尝试为测试库做贡献。该库应该像react-test-renderer一样为react-native-testing-library提供包装。
为了查看我的代码是否有效，我使用我为库编写的代码编写了一个简单的单元测试。由于这是对React Native的第一次测试，我将react-native与metro-react-native-babel-preset一起添加为dev依赖项。此外，我将预设添加到了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组件？
编辑：我发现回购正在使用Babel 6，这就是为什么地铁预设似乎不起作用的原因。所以我交换了它为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：对不起，显然我没有包含我的代码，即使它有助于解决这个问题。这很基础。我只是想用<View />渲染一个ReactTestRenderer。
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
});
});
根据docs，“从react-native版本0.38开始，默认情况下在运行react-native init时包含Jest设置。”
和
“本机反应具有Jest预设，因此package.json的jest.preset字段应指向react-native。预设是一个模仿React Native应用程序环境的节点环境。因为它不加载任何DOM或浏览器API，都大大提高了Jest的启动时间。“
关键是Jest应该与React-Native一起使用，riteway不是。运行react-native init时，会添加以下依赖项："jest-react-native"。并且将一个jest预设添加到package.json：
"jest": {
"preset": "react-native"
}
显然，还没有任何预设的riteway。
删除节点模块并重新安装
rm -rf node_modules
npm install
你没有返回任何东西，你需要返回一个“视图”
您可能只想在https://reactjs.org/docs/test-renderer.html中使用建议的示例，以确保您编写的代码没有任何问题，然后添加您自己的逻辑来改进它（只是调试它的想法）。可以在https://snack.expo.io中添加它吗？或github，我会帮你调试。