reactjs 如何使用react测试库模拟ResizeObserver在单元测试中工作

klsxnrf1 于 2022-12-22 发布在 React

关注(0)|答案(7)|浏览(154)

如果有人能帮忙的话，我有一个自定义钩子，它使用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 '@testing-library/user-event';
import React from 'react';

import mockFetchProfileActivity from '../../../services/mocks/fetch-profile-activity';
import BarChart from './BarChart';

const component = <BarChart userActivity={mockFetchProfileActivity} />;

describe('Render barElement Chart component', () => {
    const observers: any[] = [];
    let resizeHandler: (observers: any[]) => void;
    (window as any).ResizeObserver = (e: any) => {
        resizeHandler = e;

        return {
            observe(element: any) {
                observers.push(element);
            },
            unobserve(element: any) {
                const i = observers.indexOf(element);
                if (i !== -1) {
                    observers.splice(i, 1);
                }
            }
        };
    };

    it('Matches the snapshot', () => {
        // resizeHandler(observers);
        const container = render(component);
        expect(container).toMatchSnapshot();
    });

    it('when clicking on a chart barElement drilldown "challenges" are shown', async () => {
        // arrange
        const componentRender = render(component);
        waitFor(() => resizeHandler(observers));

        // act
        const barElement = componentRender.container.querySelector('svg rect');

        if (barElement) userEvent.click(barElement);

        // assert
        expect(screen.getByText('Challenge 1')).toBeInTheDocument();
    });
});

reactjs

来源：https://stackoverflow.com/questions/64558062/how-to-mock-resizeobserver-to-work-in-unit-tests-using-react-testing-library

7条答案

按热度按时间

wxclj1h51#

我选择将polyfill添加为dev依赖项，并在setupTests.js/ts中添加以下行：

global.ResizeObserver = require('resize-observer-polyfill')

赞(0）回复(0）举报 2022-12-22

mrwjdhj32#

嘲笑调整观察者：

class ResizeObserver {
    observe() {
        // do nothing
    }
    unobserve() {
        // do nothing
    }
    disconnect() {
        // do nothing
    }
}

window.ResizeObserver = ResizeObserver;
export default ResizeObserver;

sample.test.js

import ResizeObserver from './__mocks__/ResizeObserver';
import module from 'sample';

describe('module', ()=> {
     it('returns an instance of ResizeObserver', () => {
           // do something that uses the resize observer
           // NOTE: The actual observe handler would not be called in jsdom anyway as no resize would be triggered.
           // e.g.
           expect(module.somethingThatReturnAReference to the resize observer).toBeInstanceOf(ResizeObserver);
        });
});

源

赞(0）回复(0）举报 2022-12-22

wmtdaxz33#

我在setupTests.js/ts中添加了下一段代码：

global.ResizeObserver = jest.fn().mockImplementation(() => ({
    observe: jest.fn(),
    unobserve: jest.fn(),
    disconnect: jest.fn(),
}))

赞(0）回复(0）举报 2022-12-22

ecr0jaav4#

我在使用Create React应用程序设置时遇到了类似的问题。
如果是这种情况，可以在根目录中创建一个名为setupTest.js的文件，并添加以下代码：

import '@testing-library/jest-dom/extend-expect';
  import 'jest-extended';
    
  jest.mock('./hooks/useResizeObserver', () => () => ({
    __esModule: true,
    default: jest.fn().mockImplementation(() => ({
        observe: jest.fn(),
        unobserve: jest.fn(),
        disconnect: jest.fn(),
    })),
  }));

您可以在此处找到配置CreateReact应用程序测试环境的详细信息以及ResizeObserver API here

赞(0）回复(0）举报 2022-12-22

xbp102n05#

在已经很好的答案的基础上，下面是我运行ReactTesting库测试所做的事情
依赖于package.json中所需的多边形填充

"devDependencies": {
  ...
  "resize-observer-polyfill": "^1.5.1",
  ...
}

更新setupTests.ts文件，如下所示。

import * as ResizeObserverModule from 'resize-observer-polyfill';

(global as any).ResizeObserver = ResizeObserverModule.default;

现在您的测试应该运行良好。

赞(0）回复(0）举报 2022-12-22

vaqhlq816#

嘿，而不是下载一个polyfill你可以按照这个方法

class ResizeObserver {
  constructor(observerCallback) {
    this.observerCallback = observerCallback;
  }

  observe = () => {
    // using actual dom element as mutation observer requires
    // an actual node in dom
    const scrollContainer = document.querySelector(
      '.horizontal-scroll-view__items',
    );
    // Mutation observer observer any changes in DOM tree
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.type === 'attributes') {
          this.observerCallback();
        }
      });
    });

    observer.observe(scrollContainer, { attributes: true });
  };
}

global.ResizeObserver = ResizeObserver;

使用变异观察器，你可以硬编码地调整div的大小，它的属性会被变异观察器监控，因此它会导致回调触发。

赞(0）回复(0）举报 2022-12-22

pxy2qtax7#

我在我的React项目中遇到了同样的问题。我通过以下步骤解决了这个问题。
1.第一个月
1.设置下的global.ResizeObserver = require("resize-observer-polyfill");测试.ts

赞(0）回复(0）举报 2022-12-22