Jest測試React Hooks的useEffect

useEffect 是 React Hooks 中的一個關鍵功能，它允許我們在函數組件中處理副作用，如數據獲取、訂閱或手動更改 DOM

以下是使用 Jest 和 React Testing Library 測試使用 useEffect 的 React 函數組件的示例：

1. 首先，創建一個名為 MyComponent.js 的文件，其中包含使用 useEffect 的簡單組件：

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div>
      {data ? <div>Data: {JSON.stringify(data)}</div> : <div>Loading...</div>}
    </div>
  );
};

export default MyComponent;

2. 然后，創建一個名為 MyComponent.test.js 的測試文件：

import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MyComponent from './MyComponent';

// Mock the fetch function
global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({ id: 1, title: 'Test Data' }),
  })
);

describe('MyComponent', () => {
  it('fetches and displays data on mount', async () => {
    render(<MyComponent />);

    // Expect to see the loading message
    expect(screen.getByText('Loading...')).toBeInTheDocument();

    // Wait for the data to be fetched and displayed
    await waitFor(() => screen.getByText(/Data:/i));

    // Expect to see the fetched data
    expect(screen.getByText(/Data:.*"id": 1/)).toBeInTheDocument();
    expect(screen.getByText(/Data:.*"title": "Test Data"/)).toBeInTheDocument();
  });
});

在這個例子中，我們使用了 Jest 的 jest.fn() 方法來模擬 fetch 函數。我們還使用了 @testing-library/react 的 render、screen 和 waitFor 函數來渲染組件并等待異步操作完成。最后，我們使用 expect 和 toBeInTheDocument 斷言來驗證組件的行為。

要運行此測試，請確保已安裝所需的依賴項（如 jest、@testing-library/react 和 @testing-library/user-event），并在項目根目錄中運行 npm test 或 yarn test。