Unable to mock native module
<p>I'm trying to test a component I've created that uses <code>MapView</code> from <code>react-native-maps</code> as a child component. I know I need to mock that native component but what I've written still flags up an error:</p>

<pre><code>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', () =&gt; 'MapView');

it('renders correctly', () =&gt; {
  const tree = renderer.create(
    &lt;Detail /&gt;
  ).toJSON();
  expect(tree).toMatchSnapshot();
});
</code></pre>

<p>and the error I receive:</p>

<p><code>TypeError: Cannot read property 'setNativeProps' of null</code></p>

<p>Any help would be appreciated.</p>

<p>EDIT: If it helps, here's the component I'm trying to test...</p>

<pre><code>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 (
      &lt;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]}&gt;
        &lt;MapView.Marker
          coordinate={{
            latitude: 51.501211,
            longitude: -0.110530,
          }}
          title='My Pin'
          description='Somewhere'
        /&gt;
      &lt;/MapView&gt;
    );
  }

  renderSummary() {
    return (
      &lt;View style={styles.section}&gt;
        &lt;Text style={styles.headline}&gt;
          Appointment Type
        &lt;/Text&gt;
        &lt;Text style={styles.subheading}&gt;
          on Date at Timeslot
        &lt;/Text&gt;
      &lt;/View&gt;
    );
  }

  renderAddress() {
    if (!this.state.expanded) {
      return (
        &lt;View style={styles.section}&gt;
          &lt;Text style={styles.body}&gt;
            Address Line 1,
          &lt;/Text&gt;
          &lt;Text style={styles.body}&gt;
            Address Line 2,
          &lt;/Text&gt;
          &lt;Text style={styles.body}&gt;
            City POSTCODE,
          &lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  }

  renderSections() {
    return (
      &lt;View&gt;
        { this.renderSummary() }
        { this.renderAddress() }
      &lt;/View&gt;
    );
  }

  toggleExpand() {
    const newExpandedState = !this.state.expanded;
    this.setState({ expanded: newExpandedState });
    if (this.props.didChangeExpandedState) {
      this.props.didChangeExpandedState(newExpandedState);
    }
  }

  render() {
    return (
      &lt;View style={styles.container}&gt;
        { this.renderMap() }
        { this.renderSections() }
        &lt;View style={{ position: 'absolute', right: 8, top: 8 }}&gt;
          &lt;MapExpandButton onPress={this.toggleExpand.bind(this)} /&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    );
  }
}
</code></pre>