测试在循环中显示其他组件的 React 组件

Question

我正在开发一个 react-native 应用程序。有一个简单的组件可以获取一个数组并将其显示为带有 react-native-maps 的地图上的标记。

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

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

console.error node_modules/fbjs/lib/warning.js:33 警告：React.createElement：类型无效——需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义它的文件中导出您的组件。 检查 `Places` 的渲染方法。 在地方 console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2053 组件出现上述错误： 在 MapView 中（由 Places 创建） 在地方 考虑向树中添加错误边界以自​​定义错误处理行为。 您可以在 https://reactjs.org/docs/error-boundaries.html 了解有关错误边界的更多信息。 ● 为每个地点显示一个标记 不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义它的文件中导出您的组件。 检查 `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

我已经使用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]);
  });
});