fix(useSize): the return value is always undefined (#2071)

* fix: invalid observe * test: add a case to test * docs: add default value to result
alibaba · Feb 22, 2023 · 73ac860 · 73ac860
1 parent 03485ef
commit 73ac860
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 9 deletions.
diff --git a/...hooks/src/useSize/__tests__/index.test.ts → ...ooks/src/useSize/__tests__/index.test.tsx b/...hooks/src/useSize/__tests__/index.test.ts → ...ooks/src/useSize/__tests__/index.test.tsx
@@ -1,4 +1,5 @@
-import { renderHook, act } from '@testing-library/react';
+import React, { useRef } from 'react';
+import { renderHook, act, render, screen } from '@testing-library/react';
 import useSize from '../index';
 
 let callback;
@@ -14,11 +15,41 @@ jest.mock('resize-observer-polyfill', () => {
 
 // test about Resize Observer see https://github.com/que-etc/resize-observer-polyfill/tree/master/tests
 describe('useSize', () => {
-  it('with argument', () => {
+  it('should work when target is a mounted DOM', () => {
     const hook = renderHook(() => useSize(document.body));
     expect(hook.result.current).toEqual({ height: 0, width: 0 });
   });
 
+  it('should work when target is a `MutableRefObject`', async () => {
+    const mockRaf = jest
+      .spyOn(window, 'requestAnimationFrame')
+      .mockImplementation((cb: FrameRequestCallback) => {
+        cb(0);
+        return 0;
+      });
+
+    function Setup() {
+      const ref = useRef(null);
+      const size = useSize(ref);
+
+      return (
+        <div ref={ref}>
+          <div>width: {String(size?.width)}</div>
+          <div>height: {String(size?.height)}</div>
+        </div>
+      );
+    }
+
+    render(<Setup />);
+    expect(await screen.findByText(/^width/)).toHaveTextContent('width: undefined');
+    expect(await screen.findByText(/^height/)).toHaveTextContent('height: undefined');
+
+    act(() => callback([{ target: { clientWidth: 10, clientHeight: 10 } }]));
+    expect(await screen.findByText(/^width/)).toHaveTextContent('width: 10');
+    expect(await screen.findByText(/^height/)).toHaveTextContent('height: 10');
+    mockRaf.mockRestore();
+  });
+
   it('should not work when target is null', () => {
     expect(() => {
       renderHook(() => useSize(null));

diff --git a/packages/hooks/src/useSize/index.en-US.md b/packages/hooks/src/useSize/index.en-US.md
@@ -31,6 +31,6 @@ const size = useSize(target);
 
 ### Result
 
-| Property | Description         | Type                                             |
-| -------- | ------------------- | ------------------------------------------------ |
-| size     | Size of the element | `{ width: number, height: number } \| undefined` |
+| Property | Description         | Type                                             | Default                                                                   |
+| -------- | ------------------- | ------------------------------------------------ | ------------------------------------------------------------------------- |
+| size     | Size of the element | `{ width: number, height: number } \| undefined` | `{ width: target.clientWidth, height: target.clientHeight } \| undefined` |
diff --git a/packages/hooks/src/useSize/index.ts b/packages/hooks/src/useSize/index.ts
@@ -7,13 +7,15 @@ import useIsomorphicLayoutEffectWithTarget from '../utils/useIsomorphicLayoutEff
 type Size = { width: number; height: number };
 
 function useSize(target: BasicTarget): Size | undefined {
-  const el = getTargetElement(target);
+  let el = getTargetElement(target);
   const [state, setState] = useRafState<Size | undefined>(
     el ? { width: el.clientWidth, height: el.clientHeight } : undefined,
   );
 
   useIsomorphicLayoutEffectWithTarget(
     () => {
+      el = getTargetElement(target);
+
       if (!el) {
         return;
       }

diff --git a/packages/hooks/src/useSize/index.zh-CN.md b/packages/hooks/src/useSize/index.zh-CN.md
@@ -31,6 +31,6 @@ const size = useSize(target);
 
 ### Result
 
-| 参数 | 说明           | 类型                                             |
-| ---- | -------------- | ------------------------------------------------ |
-| size | DOM 节点的尺寸 | `{ width: number, height: number } \| undefined` |
+| 参数 | 说明           | 类型                                             | 默认值                                                                    |
+| ---- | -------------- | ------------------------------------------------ | ------------------------------------------------------------------------- |
+| size | DOM 节点的尺寸 | `{ width: number, height: number } \| undefined` | `{ width: target.clientWidth, height: target.clientHeight } \| undefined` |