他のコンポーネントをループ内に表示する反応コンポーネントをテストする

Question

私は反応ネイティブアプリケーションで作業しています。配列を取得し、それを反応ネイティブマップを持つマップ上のマーカーとして表示する単純なコンポーネントがあります。

私はコンポーネントをテストしようとしています。テストでは、配列のすべての要素にマーカーがあることを確認したいと思います。

しかし、私はこのエラーを取得しています：

 
    console.error node_modules/fbjs/lib/warning.js:33 
     Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. 

     Check the render method of `Places`. 
      in Places 
    console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2053 
     The above error occurred in the component: 
      in MapView (created by Places) 
      in Places 

     Consider adding an error boundary to your tree to customize error handling behavior. 
     You can learn more about error boundaries at https://reactjs.org/docs/error-boundaries.html. 

    ● shows a marker for each place 

    Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. 

    Check the render method of `Places` 

ここに私のコードは

あるPlaces.js

export default class Places extends Component<{}> { 
    //constructor 

    render() { 
    return (
     <MapView style={styles.container} 
     initialRegion={this.state.initialRegion} 
     > 
     {this.props.places.map(place => (
      <MapView.Marker 
      key={place.id} 
      coordinate={{ 
       latitude: place.location.lat, 
       longitude: place.location.lng 
      }} 
      title={place.name} 
      /> 
     ))} 
     </MapView > 
    ); 
    } 
} 

__tests __/Places.js

import 'react-native'; 
 
import React from 'react'; 
 
import Places from '../../src/places/Places' 
 

 
import renderer from 'react-test-renderer'; 
 

 
jest.mock('react-native-maps',() => 'MapView'); 
 

 
it('shows a marker for each place',() => { 
 
    const places = [ 
 
    { id: 1, name: 'test', location: { lat: 1, lng: 2 } } 
 
    ]; 
 

 
    const testee = renderer.create(
 
    <Places places={places} /> 
 
); 
 
    
 
    //not even having any expect statements yet 
 
});

私は愚かな何かをやっている、かなり確信している、しかし私は、このようなコンポーネントをテストするためのインターネットの例を見つけることができません。

Answer 1

私は `` console.log` MapView`と `` render（）を内部 `MapView.Marker`を試してみてくださいenzyme

it('shows a place component for each place',() => { 
 
    const testee = shallow(
 
    <Places places={places} /> 
 
); 
 

 
    const placeComponents = testee.find('Place'); 
 

 
    expect(placeComponents.length).toEqual(places.length); 
 

 
    placeComponents.forEach((placeComponent, index) => { 
 
     expect(placeComponent.prop('place')).toEqual(places[index]); 
 
    }); 
 
});