React测试库-模拟offsetWidth, offsetLeft

Question

我需要你的帮助来修复测试用例。我试图模拟文档主体的偏移宽度，偏移左对象。

在resize方法中，我试图模拟计算鼠标位置的newWidth，并相应地获得实际宽度和调整材料UI模态的大小。

index.tsx下面是我在鼠标下移时触发enableResize的部分事件。

<div onMouseDown={enableResize} className={classes.dragger} />

useResize.tsx

import {
Dispatch,
SetStateAction,
useCallback,
useEffect,
useState,
} from 'react';
type UseResizeProps = {
minWidth: number;
maxWidth: number;
};
type UseResizeReturn = {
width: number;
enableResize: () => void;
disableResize: () => void;
isResizing: boolean;
resize: (e: MouseEvent) => void;
setWidth: Dispatch<SetStateAction<number>>;
};
const useResize = ({ minWidth, maxWidth }: UseResizeProps): UseResizeReturn => {
const [isResizing, setIsResizing] = useState(false);
const [width, setWidth] = useState(minWidth);
const enableResize = useCallback(() => {
setIsResizing(true);
}, [setIsResizing]);
const disableResize = useCallback(() => {
setIsResizing(false);
}, [setIsResizing]);
const resize = useCallback(
(e: MouseEvent) => {
if (isResizing) {
const newWidth =
document.body.offsetWidth - (e.clientX - document.body.offsetLeft);
if (newWidth > minWidth && newWidth < maxWidth) {
setWidth(newWidth);
}
}
},
[minWidth, maxWidth, isResizing, setWidth],
);
useEffect(() => {
document.addEventListener('mousemove', resize);
document.addEventListener('mouseup', disableResize);
return () => {
document.removeEventListener('mousemove', resize);
document.removeEventListener('mouseup', disableResize);
};
}, [disableResize, resize]);
return {
width,
enableResize,
isResizing,
disableResize,
resize,
setWidth,
};
};
export default useResize;

useResize.test.tsx

const { result } = renderHook(() => useResize(defaultProps));
const event = new MouseEvent('mousedown', {
bubbles: true,
clientX: 1000,
});
act(() => {
result.current.resize(event);
result.current.enableResize();
});
expect(result.current.isResizing).toBeTruthy();
Object.defineProperty(document.body, 'offsetWidth', {
value: 1536,
});
Object.defineProperty(document.body, 'offsetLeft', {
value: 0,
});
const width: any =
document.body.offsetWidth - (event.clientX - document.body.offsetLeft);
window.dispatchEvent(new Event('resize'));
expect(defaultProps.minWidth).toBeLessThan(width);
act(() => {
result.current.setWidth(width);
});
expect(result.current.width).toBe(536);
});

Answer 1

如果我们只关注useResize钩子的单元测试，那么模拟mousedown事件来启用调整大小是不必要的。我们可以直接调用enableResize函数来改变isResizing的状态。

代替Event，我们可以创建和分派一个mousemove类型和clientX值的MouseEvent。

例句:

useResize.test.tsx:

import { renderHook, act } from '@testing-library/react-hooks';
import useResize from './useResize';
describe('72926548', () => {
test('should set new width', async () => {
const { result } = renderHook(() => useResize({ minWidth: 100, maxWidth: 200 }));
act(() => {
result.current.enableResize();
})
expect(result.current.isResizing).toBeTrue();
Object.defineProperty(document.body, 'offsetWidth', {
value: 1150,
});
Object.defineProperty(document.body, 'offsetLeft', {
value: 0,
});
act(() => {
document.dispatchEvent(new MouseEvent('mousemove', { clientX: 1000 }));
})
expect(result.current.width).toBe(150);
});
});

测试结果:

PASS  stackoverflow/72926548/useResize.test.tsx (6.32 s)
72926548
✓ should set new width (14 ms)
---------------|---------|----------|---------|---------|-------------------
File           | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
---------------|---------|----------|---------|---------|-------------------
All files      |   95.24 |    66.67 |   83.33 |   95.24 |                   
useResize.tsx |   95.24 |    66.67 |   83.33 |   95.24 | 32                
---------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        6.615 s, estimated 7 s

包版本:

"@testing-library/react-hooks": "^8.0.1",
"jest": "^26.6.3",
"react": "^16.14.0",
"react-dom": "^16.14.0"