笑话测试用例因调整大小事件而失败

Question

我在reactJS中创建了一个自定义钩子，它监听元素尺寸的变化，然后计算元素的宽度和高度。

export function useDynamicDimensions(element) {
  const [ width, setWidth ] = useState(element?.innerWidth);
  const [ height, setHeight ] = useState(element?.innerHeight);

  useEffect(() => {
    const handleWindowResize = () => {
      setWidth(element?.innerWidth);
      setHeight(element?.innerHeight);
    };

    element?.addEventListener('resize', handleWindowResize);

    return () => element?.removeEventListener('resize', handleWindowResize);
  }, []);

  return { width, height };
}

我使用 Jest 和测试库编写了以下测试用例。

  it('updates dimensions on window resize', () => {
    const initialWidth = 100;
    const initialHeight = 200;
    const newWidth = 250;
    const newHeight = 300;

    const element = {
      innerWidth: initialWidth,
      innerHeight: initialHeight,
      addEventListener: jest.fn(),
      removeEventListener: jest.fn(),
    };

    const { result } = renderHook(() => useDynamicDimensions(element));

    expect(result.current.width).toBe(initialWidth);
    expect(result.current.height).toBe(initialHeight);

    act(() => {
      element.innerWidth = newWidth;
      element.innerHeight = newHeight;
      global.dispatchEvent(new Event('resize'));
    });

    expect(result.current.width).toBe(250);
  });

但是这个测试用例不起作用。它给出了一个错误

expect(received).toBe(expected)

    Expected: 250
    Received: 100

有人可以告诉我哪里出错了吗？

Answer 1

嘿，我找到了自己问题的答案:)

import React from 'react';
import { renderHook, act } from '@testing-library/react';

describe('useDynamicDimensions', () => {
  it('should return dimensions as is if there is no change in dimensions', () => {
    const initialWidth = 800;
    const initialHeight = 600;

    const map = {};

    const element = {
      innerWidth: initialWidth,
      innerHeight: initialHeight,
      addEventListener: jest.fn((event, cb) => {
        map[event] = cb;
      }),
      removeEventListener: jest.fn()
    };

    const { result } = renderHook(() => useDynamicDimensions(element));

    expect(result.current.width).toBe(initialWidth);
    expect(result.current.height).toBe(initialHeight);
  });

  it('should update dimensions on element resize', () => {
    const initialWidth = 800;
    const initialHeight = 600;

    const map = {};

    const element = {
      innerWidth: initialWidth,
      innerHeight: initialHeight,
      addEventListener: jest.fn((event, cb) => {
        map[event] = cb;
      }),
      removeEventListener: jest.fn()
    };

    const { result } = renderHook(() => useDynamicDimensions(element));

    act(() => {
      element.innerWidth = 500;
      element.innerHeight = 300;
      map.resize?.();
    });

    expect(result.current.width).toBe(500);
    expect(result.current.height).toBe(300);
  });
});