相关疑难解决方法(0)

如何使用反应测试库模拟 ResizeObserver 以在单元测试中工作

如果有人可以提供帮助,我有一个自定义钩子,它使用 ResizeObserver 来更改组件的宽度。我的问题是,当我去运行我的单元测试时,它破坏了我的所有测试,查看快照时它没有渲染 dom 中的所有元素。在我实现 ResizeObserver 之前,它一直在工作。有谁知道我是否有一种方法可以开玩笑。将 ResizeObserver 模拟为未定义。或者其他建议。

import * as React from 'react';
import ResizeObserver from 'resize-observer-polyfill';

const useResizeObserver = (ref: { current: any }) => {
    const [dimensions, setDimensions] = React.useState<DOMRectReadOnly>();
    React.useEffect(() => {
        const observeTarget = ref.current;
        const resizeObserver = new ResizeObserver((entries) => {
            entries.forEach((entry) => {
                setDimensions(entry.contentRect);
            });
        });
        resizeObserver.observe(observeTarget);
        return () => {
            resizeObserver.unobserve(observeTarget);
        };
    }, [ref]);
    return dimensions;
};

export default useResizeObserver;



import { render, screen, waitFor } from '@testing-library/react';
import userEvent from …
Run Code Online (Sandbox Code Playgroud)

unit-testing window-resize reactjs jestjs react-testing-library

8
推荐指数
5
解决办法
6127
查看次数