Jest.js 无法模拟本机模块

pbossiut  于 2023-02-01  发布在  Jest
关注(0)|答案(3)|浏览(227)

我正在测试我创建的一个组件,它使用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>
    );
  }
}
vfwfrxfs

vfwfrxfs1#

已在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);
    }
  }
});
jjhzyzn0

jjhzyzn02#

当我遇到这个问题时,我将这些模块添加到了您的package.json中jest下的忽略列表中:

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

ctrmrzij3#

请尝试以下操作以获取最新的react-native-maps库版本:

jest.mock('react-native-maps', () => {
  const React = require('react');
  const {View} = require('react-native');

  class MockMapView extends React.Component {
    render() {
      const {testID, children, ...props} = this.props;

      return (
        <View
          {...{
            ...props,
            testID,
          }}>
          {children}
        </View>
      );
    }
  }

  class MockMarker extends React.Component {
    render() {
      const {testID, children, ...props} = this.props;

      return (
        <View
          {...{
            ...props,
            testID,
          }}>
          {children}
        </View>
      );
    }
  }

  return {
    __esModule: true,
    default: MockMapView,
    Marker: MockMarker,
    enableLatestRenderer: jest.fn(),
  };
});

相关问题