TypeError: Cannot read property 'map' of undefined ? Jest / React Native

Question

我有一个图像滑块组件来显示我的 Firebase 数据库中的图像，如下所示，

import React from 'react';
import Swiper from 'react-native-swiper';
import { View, StyleSheet, Image } from 'react-native'


const ImageSlider = ({images}) => {
    return (
        <Swiper autoplayTimeout={5}
            style={styles.wrapper}
            showsButtons={false}
            loadMinimal={true}
            showsPagination={true}
            paginationStyle={styles.paginationStyle}
            activeDotStyle={styles.activeDotStyle}
            dotStyle={styles.dotStyle}
            loop={true} autoplay={true}
        >
            {images.map((data, index) => {
                return (
                    <View key={index} style={styles.slider}>
                        <Image style={styles.itemImage} source={{ uri: data }} />
                    </View>
                )
            })}
        </Swiper>
    )
}

为了测试上面的组件，我使用了以下测试文件，

import React from 'react';
import renderer from 'react-test-renderer';
import ImageSlider from '../../../src/components/imageSlider/ImageSlider';


test('renders correctly', () => {
  const tree = renderer.create(<ImageSlider />).toJSON();
  expect(tree).toMatchSnapshot();
});

当我执行运行 npm test 命令时出现以下错误

TypeError: Cannot read property 'map' of undefined

谁能帮我解决这个问题，谢谢

Answer 1

在您的测试中，您正在创建一个没有任何参数的 ImageSlider：

<ImageSlider />

在 ImageSlider 中，您尝试映射属性 images:

images.map( //etc

因为您没有传入 images parameter/property，所以当您尝试映射它时，images 是未定义的。要解决这个问题，请在您的测试中为 images 传入值：

<ImageSlider images={YOUR_TEST_IMAGES_DATA}/>

另一种选择是重新设计 ImageSlider，以便在 images 未定义时优雅地失败。但是，那么做测试就没有多大意义了（除非测试是为了看看如果没有传入参数会发生什么）

TypeError: Cannot read property 'map' of undefined ? Jest / React Native

TypeError: Cannot read property 'map' of undefined ? Jest / React Native

unit-testing

jestjs

react-native

react-native-swiper