Jest測試React Hooks的useState

要使用Jest測試React Hooks中的useState，你需要遵循以下步驟：

1. 首先，確保已經安裝了所需的依賴項。在項目根目錄下運行以下命令：

npm install --save-dev jest @testing-library/react @testing-library/jest-dom @testing-library/user-event

2. 在項目根目錄下創建一個名為Counter.js的文件，其中包含一個簡單的計數器組件，該組件使用useState來管理計數器的狀態：

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
     <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
};

export default Counter;

3. 在項目根目錄下創建一個名為Counter.test.js的文件，用于編寫測試用例：

import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Counter from './Counter';

describe('Counter', () => {
  it('renders the increment button and count text', () => {
    render(<Counter />);
    const buttonElement = screen.getByText(/Increment/i);
    const countTextElement = screen.getByText(/Count: 0/i);
    expect(buttonElement).toBeInTheDocument();
    expect(countTextElement).toBeInTheDocument();
  });

  it('increments the count when the button is clicked', () => {
    render(<Counter />);
    const buttonElement = screen.getByText(/Increment/i);
    fireEvent.click(buttonElement);
    const countTextElement = screen.getByText(/Count: 1/i);
    expect(countTextElement).toBeInTheDocument();
  });
});

4. 在package.json文件中添加一個test腳本，以便可以運行測試：

"scripts": {
  "test": "jest"
}

5. 最后，運行npm test命令以執行測試用例。如果一切正常，你應該會看到類似以下的輸出：

PASS  ./Counter.test.js
  Counter
    ? renders the increment button and count text (23 ms)
    ? increments the count when the button is clicked (7 ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        1.5 s

這表明你已成功地使用Jest測試了React Hooks中的useState。