使用 Jest 和 Enzyme 在 React.useEffect() 中单元测试 image.onload 和 image.onerror

Question

我有以下组件在完全加载时显示图像：

export default function ImageDisplay(props: OwnPropsInterface): JSX.Element {
    const { src, alt, height, width } = props;

    const [image, setImage] = React.useState<string>('');
    const [showImage, setShowImage] = React.useState<boolean>(false);
    const [imageHeight, setImageHeight] = React.useState<string>('');
    const [imageWidth, setImageWidth] = React.useState<string>('');

    const setImageDimensions = () => {
        setImageHeight(
            typeof height === 'string' ? height : `${convertPixelsToRem(height)}rem`
        );
        setImageWidth(
            typeof width === 'string' ? width : `${convertPixelsToRem(width)}rem`
        );
    };

    const loadImageAsync = async () => {
        const image: HTMLImageElement = new Image();

        image.onload = () => {
            setImage(image.src);
            setShowImage(true);
        };
        image.onerror = (error) => {
            setShowImage(true);
        };

        image.src = src;
    };

    React.useEffect(() => {
        setImageDimensions();
        loadImageAsync();
    }, [src]);

    return (
        <>
            {showImage && (
                <img
                    src={image}
                    alt={alt}
                    style={{ height: imageHeight, width: imageWidth }}
                />
            )}
        </>
    );
}

我需要测试image.onload 和image.onerror 以及组件的后续行为。

目前我编写了以下测试：

    describe('ImageDisplay', () => {
        let useEffect: jest.SpyInstance;
        let wrapper: ShallowWrapper;

        const mockUseEffect = () => {
            useEffect.mockImplementationOnce((f) => f());
        };

        beforeEach(() => {
            useEffect = jest.spyOn(React, 'useEffect').mockImplementation(() => {});

            mockUseEffect();
            mockUseEffect();
            wrapper = shallow(<ImageDisplay {...imageDisplayProps} />);
        });

        describe('on load', () => {
            it('should set image props', () => {
                expect(wrapper.find('img').props()).toEqual({
                    alt: 'test_alt',
                    src: '/test/src',
                    style: {
                        height: '100%',
                        width: '100%',
                    },
                });
            });
        });
    });

expect 调用失败并出现以下错误：

Method “props” is meant to be run on 1 node. 0 found instead.

      115 |         describe('on load', () => {
      116 |             it('should set image props', () => {
    > 117 |                 expect(wrapper.find('img').props()).toEqual({
          |                                            ^
      118 |                     alt: 'test_alt',
      119 |                     src: '/test/src',
      120 |                     style: {

      at ShallowWrapper.single (node_modules/enzyme/src/ShallowWrapper.js:1652:13)
      at ShallowWrapper.props (node_modules/enzyme/src/ShallowWrapper.js:1175:17)
      at Object.<anonymous> (test/unit-tests/components/ImageDisplay.component.test.tsx:117:44)

我知道expect 失败了，因为它立即执行而不等待image.onload 完成，因此它无法找到img 元素。

有没有办法测试图像事件和组件行为？真的很感谢所有的帮助。谢谢。

Answer 1

您可以添加一个 waitForComponentToPaint 函数来等待整个组件完全绘制。

const waitTimeout = (time = 0) => new Promise((resolve) => setTimeout(resolve, time));

const waitForComponentToPaint = async (wrapper, time = 0) => {
  await act(async () => {
    await waitTimeout(time);
    wrapper.update();
  });
};

然后你可以这样使用：

it('should set image props', async () => {
    await waitForComponentToPaint(wrapper)
    expect(wrapper.find('img').props()).toEqual({
        alt: 'test_alt',
        src: '/test/src',
        style: {
            height: '100%',
            width: '100%',
        },
    });
});