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

Posted 2023-03-13

【中文标题】测试在循环中显示其他组件的 React 组件

【英文标题】：Testing React Components which Display Other Components in Loop

【发布时间】：2018-05-17 00:49:42

【问题描述】：

我正在开发一个 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
);

我很确定我在做一些愚蠢的事情，但是我找不到测试此类组件的互联网示例。

【问题讨论】：

在render() 中尝试console.log MapView 和MapView.Marker。它们的值可能是undefined

【参考方案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]);
  );
);