React-native jest测试失败: TypeError:无法读取未定义的属性“”default“”
React-native jest测试失败: TypeError:无法读取未定义的属性“”default“”
提问于 2019-01-07 06:11:02
我有下面的代码，我想写一个快照测试。
import React from 'react';
import { AsyncStorage, View, Button, Text, StyleSheet } from 'react-native';
import t from 'tcomb-form-native';
const Login = t.struct({
email: t.String,
password: t.String,
});
const Form = t.form.Form;
class SignInScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<Form ref={c => this._form = c} type={Login}/>
<Button title="Submit" onPress={this.handleSubmit}/>
<Button title="Sign Up" onPress={this.handleSignUp}/>
</View>
);
}
}
export default SignInScreen;
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
marginTop: 15,
padding: 20,
backgroundColor: '#ffffff',
}
});我在命令行中运行jest，在我定义onPress()方法之前，它工作得很好。
validateCredentials = (email, password) => {
return true;
};
handleSubmit = async () => {
const value = this._form.getValue();
if(value != null) {
/*
TODO: Make a query to backend to validate credentials
*/
if (this.validateCredentials(value['email'], value['password'])) {
await AsyncStorage.setItem('userToken', 'abc');
this.props.navigation.navigate('App');
} else {
alert('Invalid email or password');
}
}
}
handleSignUp = () => {
this.props.navigation.navigate('SignUp');
}然后它会失败，并显示我不太理解的错误消息。
FAIL __tests__/SignInScreen-test.js
✕ SignInScreen snapshot test (24ms)
● SignInScreen snapshot test
TypeError: Cannot read property 'default' of undefined
9 | });
10 | const Form = t.form.Form;
> 11 | class SignInScreen extends React.Component {
| ^
12 |
13 |
14 | render() {
at new SignInScreen (screens/SignInScreen.js:11:423)
at constructClassInstance (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4810:22)
at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6581:9)
at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7408:20)
at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10149:16)
at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10181:28)
at renderRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10267:11)
at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11135:11)
at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11047:11)
at performSyncWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11021:7)
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8075
The above error occurred in the <SignInScreen> component:
in SignInScreen (at SignInScreen-test.js:7)jest配置：
"jest": {
"preset": "react-native",
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
},
"transformIgnorePatterns": []
}.babelrc
{
"presets": ["module:metro-react-native-babel-preset"]
}我的测试代码：
import 'react-native';
import React from 'react';
import SignInScreen from '../screens/SignInScreen';
import renderer from 'react-test-renderer';
test('SignInScreen snapshot test', () => {
const snap = renderer.create(<SignInScreen/>).toJSON();
expect(snap).toMatchSnapshot();
});有什么想法吗？
回答 1
Stack Overflow用户
发布于 2019-01-07 07:54:14
通常，此错误与无法找到特定模块的mock相关。您需要模拟tcomb，因为它正在呈现在您的SignInClass中调用的<Form/>组件。您可以这样做：
jest.mock('tcomb-form-native', () => {
const React = require('React')
const t = require.requireActual('tcomb-form-native')
// Patch the base Component class to make rendering possible.
t.form.Component.prototype.render = function render () {
return React.createElement(this.getTemplate().name, this.props)
}
return t
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54066404
复制相关文章
相似问题