1

我有一个图像滑块组件来显示我的 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

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

4

1 回答 1

2

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

<ImageSlider />

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

images.map( //etc

因为您没有传入images参数/属性，images所以当您尝试映射它时未定义。images为了解决这个问题，在您的测试中传递值：

<ImageSlider images={YOUR_TEST_IMAGES_DATA}/>

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

于 2021-03-11T04:13:20.020 回答