0

这是一个图片库，我相信它可以正常工作。它在模拟器中运行良好。我尝试过相同测试的变体：

 test('main image should display', async () => {
    const { findByTestId } = render(<ImageGallery images={images} />);
    const mainImage = await findByTestId('largeImage');
    expect(mainImage).toBeDefined();
  });

和

test('main image should display', async () => {
    const { getByTestId } = render(<ImageGallery images={images} />);
    await waitFor(() => {
      expect(getByTestId('largeImage')).toBeDefined();
    });
  });

在这两种情况下，测试都失败了：无法在未安装的组件上找到节点。

在我的 tsx 文件中，我有一个 useEffect 挂钩，可以在显示之前预加载所有图像。然后它更新状态（这会导致另一个不相关的问题）

 // Cache all images in the gallery after initial component render
  useEffect(() =>  {
    if (!imagesReady) {
      const loadedImages: Array<Promise<boolean>> = images.map((image) => {
        return Image.prefetch(image.url);
      });

      Promise.all(loadedImages).then((imageLoadStatus) => {
        // Filter out any images that didn't properly load
        images = images.filter((_, index) => imageLoadStatus[index]);
        setActiveImage(images[0]);
        setImagesReady(true);
      });
    }
  });

然后在返回中：

// Render either loading indicator or image gallery conditionally.
  if (!imagesReady) {
    return (
      <Container>
        <ActivityIndicator size="small" color="#202020" testID="loading" />
      </Container>
    );
  }

  return (
    
    <Container testID="galleryWrapper">
      <LargeImage source={{ uri: activeImage.url }} testID="largeImage" />
      <ThumbnailList
        horizontal
        data={images}
        renderItem={thumbnail}
        keyExtractor={(image) => image.id}
        showsHorizontalScrollIndicator={false}
      />
    </Container>
  );

就像我说的，代码在模拟器中运行良好，加载时间不到 4.5 秒。建议？

4

1 回答 1

0

对于将来发现此问题的任何人...问题出在： Image.prefetch(image.url);

即使我使用内联数据（而不是托管在 Web 服务器上的图像）进行测试，Jest 仍然有解决这个问题的问题。我通过模拟 Image.prefetch 来修复它。

于 2021-05-12T20:24:05.393 回答