reactjs - 如何使用反应测试库模拟 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 '@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();
});
});
解决方案
我选择将 polyfill 添加为开发依赖项,并将以下行添加到 setupTests.js/ts:
global.ResizeObserver = require('resize-observer-polyfill')
推荐阅读
- c++ - 将函数作为参数传递给类成员函数
- ansible - Ansible Copy 模块 - 复制跳过源文件的前 9 行
- javascript - canvas.toDataURL() 没有返回完整的图像 - 它在顶部裁剪
- node.js - 全局安装后 Express-generator 无法正常工作
- javascript - TypeError:e 不是 Object 的函数。
在 BotFramework-webchat@4.8.0 - r - 如何将 x 轴定义为 1 而不是 0
- r - 无论如何在 Latex 中集成 R highchart 交互式绘图?还是保存它们以使它们具有交互性?
- jupyter-notebook - 如何修复 MethodError:没有方法匹配?
- python - 无法在 cgi-bin url 中执行 Python3 正在通过 python2 执行
- c++ - 重置 SetConsoleCtrlHandler 以关闭当前控制台