无法让Jest与react导航一起工作
无法让Jest与react导航一起工作
提问于 2017-05-22 14:54:14
我在让Jest和react-navigation一起工作时遇到了问题。我已经按照react-navigation guidelines中的说明创建了一个新项目，然后添加了Jest并按照下面的详细说明进行了配置。该应用程序运行良好，但当我运行测试时，我遇到了以下错误：
React caught an error thrown by NavigationContainer. You should fix this error in your code. Consider adding an error boundary to your tree to customize error handling behavior.
TypeError: Cannot read property 'then' of undefined
The error is located at:
in NavigationContainer (created by App)
in App
The error was thrown at:
at NavigationContainer.componentDidMount (/Users/gustav/kicksort/albert/albertReact1/node_modules/react-navigation/src/createNavigationContainer.js:189:2171)
at commitLifeCycles (/Users/gustav/kicksort/albert/albertReact1/node_modules/react-test-renderer/lib/ReactFiberCommitWork.js:421:24),
...
...下面是我的package.json文件的相关内容：
"dependencies": {
"react": "16.0.0-alpha.6",
"react-dom": "16.0.0-alpha.6",
"react-native": "0.44.0",
"react-navigation": "1.0.0-beta.9"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
"babel-preset-react-native": "^1.9.2",
"enzyme": "2.8.2",
"jest": "20.0.3",
"jest-cli": "20.0.3",
"jest-react-native": "18.0.0",
"react-test-renderer": "16.0.0-alpha.6"
},
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-navigation)"
]
}这是我的.babelrc文件：
{
"presets": ["react-native"],
"env": {
"test": {
"presets": ["react-native"],
"plugins": ["transform-es2015-modules-commonjs"]
}
}
}最后是__mocks__/react-native.js：
const rn = require('react-native')
jest.mock('Linking', () => {
return {
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
openURL: jest.fn(),
canOpenURL: jest.fn(),
getInitialURL: jest.fn(),
}
})
module.exports = rn;回答 3
Stack Overflow用户
发布于 2017-05-22 21:45:06
这是我在package.json中写的：
"jest": {
"preset": "react-native",
"collectCoverage": true,
"coverageDirectory": "__coverage__",
"testRegex": "./__tests__/[^setup].*.js$",
"transformIgnorePatterns": ["node_modules/(?!react-native|native-base|react-navigation|react-native-fabric)"],
"setupFiles": [
"./__tests__/setup.js"
]
}我有一个名为"__test__“的文件夹，它下面是一个setup.js文件，用来控制我模拟的所有组件：
//setup.js
jest.mock('Linking', () => {
return {
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
openURL: jest.fn(),
canOpenURL: jest.fn(),
getInitialURL: jest.fn(),
}
})
jest.mock('react-native-fabric', () => {
return {
Crashlytics: {
crash: () => {},
},
Answers: {
logCustom: () => {},
logContentView: () => {},
},
}
})
jest.mock('WebView', () => 'WebView');
jest.mock('DatePickerIOS', () => 'DatePickerIOS');Stack Overflow用户
发布于 2017-06-14 06:40:11
我遇到了这个问题。但是我能够通过查看源代码来修复它，并发现它在调用
Linking.getInitialURL().then(
(url: string) => url && this._handleOpenURL(url)
);因此它可以通过以下方式修复
jest.mock('Linking', () => {
// we need to mock both Linking.getInitialURL()
// and Linking.getInitialURL().then()
const getInitialURL = jest.fn()
getInitialURL.mockReturnValueOnce({then: jest.fn()})
return {
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
openURL: jest.fn(),
canOpenURL: jest.fn(),
getInitialURL: getInitialURL
}
})Stack Overflow用户
发布于 2018-05-29 06:28:24
最简单的解决方法是使用react-native-jest-mocks。只需遵循它的说明即可。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44106377
复制相关文章
相似问题
腾讯云开发者
