我正在努力为测试库做贡献。该库应该像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,这就是为什么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:
抱歉,很显然我没有包含我的代码,尽管它对于解决此问题很有帮助。这很基本。我只是想使用
<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设置。”
和
“react-native附带了一个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的任何预设。