使用 React-Testing-Library 和 Jest 测试 useRef onError Fn

Question

我有这个简单的 fallbackImage 组件：

export interface ImageProps {
  srcImage: string;
  classNames?: string;
  fallbackImage?: FallbackImages;
}

const Image = ({
  srcImage,
  classNames,
  fallbackImage = FallbackImages.FALLBACK
}: ImageProps) => {
  const imgToSourceFrom = srcImage;
  const imgToFallbackTo = fallbackImage;

  const imageRef = useRef(null);
  const whenImageIsMissing = () => {
    imageRef.current.src = imgToFallbackTo;
    imageRef.current.onerror = () => {};
  };

  return (
    <img ref={imageRef} src={imgToSourceFrom} className={classNames} onError={whenImageIsMissing} />
  );
};

export default Image;

它完美地工作。 我使用Jest和React-Testing-Library 。 除了一种场景之外，我已经测试了所有场景。 这个：

  const whenImageIsMissing = () => {
    imageRef.current.src = imgToFallbackTo;
    imageRef.current.onerror = () => {}; // This line.
  };

如果两个图像都丢失，这条线基本上可以防止无限循环

问题：我想测试我的onerror函数是否被调用了一次。 我真的被困在如何做到这一点上。 这里是测试...

      const { container } = render(<Image srcImage={undefined} fallbackImage={undefined} />);

      const assertion = container.querySelector('img').onerror;

      fireEvent.error(container.firstElementChild);

      console.log(container.firstElementChild);
      expect(container.firstElementChild.ref.current.onerror).toHaveBeenCalledTimes(1);
      // This though has no reference to a real value. Is an example of what I want to get at.

问题：如何访问 ref 回调函数并检查我的函数被调用了多少次？

关于这个的任何想法。 我不知所措，我试过嘲笑refs ，我试过嘲笑和监视组件。 我尝试使用 act 和 async/await，以防它被调用。 我真的需要一些帮助。

Answer 1

您应该检查您的函数是否被调用，这称为测试实现细节，而您应该检查您的 img 元素是否具有正确的 src。

即使你应该添加一些 alt 和用户getByAltText来选择图像元素

const { getByAltText } = render(<Image srcImage={undefined} fallbackImage={undefined} />);
const imageElement = getByAltText('Image Alt');
fireEvent.error(imageElement);
expect(imageElement.src).toEqual(imgToFallbackTo);

Answer 2

您有 2 个选择：

将回调添加到您的道具中，该回调将在调用 whenImageIsMissing 时调用：

export interface ImageProps {
  srcImage: string;
  classNames?: string;
  fallbackImage?: FallbackImages;
  onImageMissing?:();
}

const Image = ({
  srcImage,
  classNames,
  onImageMissing,
  fallbackImage = FallbackImages.FALLBACK
}: ImageProps) => {
  const imgToSourceFrom = srcImage;
  const imgToFallbackTo = fallbackImage;

  const imageRef = useRef(null);
  const whenImageIsMissing = () => {
    imageRef.current.src = imgToFallbackTo;
    imageRef.current.onerror = () => {};
    if (onImageMissing) onImageMissing();
  };

  return (
    <img ref={imageRef} src={imgToSourceFrom} className={classNames} onError={whenImageIsMissing} />
  );
};

然后在你的测试中插入 jest.fn 并检查它被调用了多少次。

另一种选择是采用 whenImageIsMissing 的实现并将其放入 image.util 文件中，然后使用 jest.spy 获取调用次数。 由于您使用的是函数组件，因此无法直接访问此函数。

希望这可以帮助。