無法模擬本機模塊

Question

我試圖測試一個我創建的組件，它使用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> 
    ); 
    } 
} 

Answer 1

發現GitHub上從這個問題的解決方案：https://github.com/facebook/jest/issues/1960

我認爲這個問題是MapView.Marker子組件沒有被嘲笑。這個答案也是模擬兒童組件。

jest.mock('react-native-maps',() => { 
    return class MockMapView extends React.Component { 
    static Marker = props => React.createElement('Marker', props, props.children); 
    static propTypes = { children: React.PropTypes.any }; 

    render() { 
     return React.createElement('MapView', this.props, this.props.children); 
    } 
    } 
}); 

Answer 2

當我遇到了這個問題，我加入了模塊忽略列表下笑話你的package.json ：

"transformIgnorePatterns": [ 
    "node_modules/(?!react-native|react-native-maps)" 
]