我正在测试我创建的一个组件,它使用react-native-maps
中的MapView
作为子组件,我知道我需要模拟这个原生组件,但是我所写的内容仍然会标记一个错误:
import 'react-native';
import React from 'react';
import Detail from '../js/components/Detail';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
jest.mock('react-native-maps', () => 'MapView');
it('renders correctly', () => {
const tree = renderer.create(
<Detail />
).toJSON();
expect(tree).toMatchSnapshot();
});
我收到的错误是:TypeError: Cannot read property 'setNativeProps' of null
任何帮助都将不胜感激。
编辑:如果有帮助的话,这是我试图测试的组件...
import React, { Component } from 'react';
import {
Dimensions,
LayoutAnimation,
StyleSheet,
Text,
TouchableHighlight,
View,
} from 'react-native';
import MapView from 'react-native-maps';
import MapExpandButton from './buttons/MapExpandButton';
const styles = StyleSheet.create({
...
});
export default class AppointmentDetail extends Component {
constructor(props) {
super(props);
this.state = {
expanded: false,
}
}
componentWillUpdate() {
LayoutAnimation.easeInEaseOut();
}
renderMap() {
return (
<MapView
initialRegion={{
latitude: 51.501211,
longitude: -0.110530,
latitudeDelta: 0.005,
longitudeDelta: 0.005,
}}
scrollEnabled={this.state.expanded}
pitchEnabled={this.state.expanded}
zoomEnabled={this.state.expanded}
rotateEnabled={this.state.expanded}
loadingEnabled={true}
showsPointsOfInterest={false}
style={[styles.map, this.state.expanded ? styles.mapExpanded : undefined]}>
<MapView.Marker
coordinate={{
latitude: 51.501211,
longitude: -0.110530,
}}
title='My Pin'
description='Somewhere'
/>
</MapView>
);
}
renderSummary() {
return (
<View style={styles.section}>
<Text style={styles.headline}>
Appointment Type
</Text>
<Text style={styles.subheading}>
on Date at Timeslot
</Text>
</View>
);
}
renderAddress() {
if (!this.state.expanded) {
return (
<View style={styles.section}>
<Text style={styles.body}>
Address Line 1,
</Text>
<Text style={styles.body}>
Address Line 2,
</Text>
<Text style={styles.body}>
City POSTCODE,
</Text>
</View>
);
}
}
renderSections() {
return (
<View>
{ this.renderSummary() }
{ this.renderAddress() }
</View>
);
}
toggleExpand() {
const newExpandedState = !this.state.expanded;
this.setState({ expanded: newExpandedState });
if (this.props.didChangeExpandedState) {
this.props.didChangeExpandedState(newExpandedState);
}
}
render() {
return (
<View style={styles.container}>
{ this.renderMap() }
{ this.renderSections() }
<View style={{ position: 'absolute', right: 8, top: 8 }}>
<MapExpandButton onPress={this.toggleExpand.bind(this)} />
</View>
</View>
);
}
}
3条答案
按热度按时间vfwfrxfs1#
已在GitHub上找到此问题的解决方案:https://github.com/facebook/jest/issues/1960
我认为问题是MapView.Marker子组件没有被模拟。这个答案也模拟了子组件。
jjhzyzn02#
当我遇到这个问题时,我将这些模块添加到了您的package.json中jest下的忽略列表中:
ctrmrzij3#
请尝试以下操作以获取最新的react-native-maps库版本: