Jest测试React Hooks的useLayoutEffect

useLayoutEffect 是 React Hooks 中的一个钩子，它与 useEffect 类似，但在 DOM 更新之后同步执行

首先，创建一个简单的组件，使用 useLayoutEffect：

// MyComponent.js
import React, { useLayoutEffect, useState } from 'react';

const MyComponent = () => {
  const [width, setWidth] = useState(window.innerWidth);

  useLayoutEffect(() => {
    const handleResize = () => {
      setWidth(window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return <div>Window width: {width}</div>;
};

export default MyComponent;

接下来，使用 Jest 和 @testing-library/react 对此组件进行测试：

// MyComponent.test.js
import React from 'react';
import { render, unmountComponentAtNode } from '@testing-library/react';
import MyComponent from './MyComponent';

let container = null;

beforeEach(() => {
  container = document.createElement('div');
  document.body.appendChild(container);
});

afterEach(() => {
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

describe('MyComponent', () => {
  test('updates window width on resize', () => {
    const originalWidth = window.innerWidth;
    const newWidth = originalWidth + 100;

    // Render the component
    render(<MyComponent />, container);

    // Expect initial width
    expect(container.textContent).toBe(`Window width: ${originalWidth}`);

    // Change window width and trigger resize event
    Object.defineProperty(window, 'innerWidth', { value: newWidth });
    window.dispatchEvent(new Event('resize'));

    // Expect updated width
    expect(container.textContent).toBe(`Window width: ${newWidth}`);
  });
});

这个测试用例首先检查组件初始化时的窗口宽度。然后，我们通过更改 window.innerWidth 并触发 resize 事件来模拟窗口大小调整。最后，我们期望组件能够正确地更新宽度。