测试反应组件，这些组件在循环中显示其他组件

Question

我正在开发一个反应新应用。有一个简单的组件，它具有一个数组，并将其显示为带有反应图的地图上的标记。

我正在尝试测试组件。在测试中，我想检查数组的每个元素是否有一个标记。

但是，我遇到了这个错误：

   console.error node_modules/fbjs/lib/parning.js：33      警告：React.Createelement：类型是无效的 - 预期的是字符串（用于内置组件）或类/功能（用于复合组件），但GOT：未定义。您可能会忘记从定义的文件中导出组件。      检查"地方"的渲染方法。          在某些地方    console.Error node_modules/react-Test-Renderer/cjs/react-Test-Renderer.development.js：2053      上述错误发生在组件中：          在Mapview（由位置创建）          在某些地方      考虑在树上添加错误边界以自定义错误处理行为。      您可以在https://reactjs.org/docs/error-boundaries.html上了解有关错误边界的更多信息。  ●显示每个地方的标记    不变违规：元素类型是无效的：预期的是字符串（用于内置组件）或类/功能（用于复合组件），但got：未定义。您可能会忘记从定义的文件中导出组件。    检查"地方"的渲染方法

这是我的代码

place.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 >
    );
  }
}

__测试__/ploce.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

我已经通过使用酶

解决了问题

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]);
  });
});