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 事件來模擬窗口大小調整。最后，我們期望組件能夠正確地更新寬度。