Jest測試React Hooks的useContext

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

1. 首先，確保已經安裝了所需的依賴項，例如：@testing-library/react、@testing-library/jest-dom和jest。

2. 創建一個簡單的React上下文并在組件中使用useContext。例如，我們創建一個名為ThemeContext的上下文，并在MyComponent組件中使用它：

// ThemeContext.js
import React from 'react';

const ThemeContext = React.createContext('light');

export default ThemeContext;

// MyComponent.js
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

const MyComponent = () => {
  const theme = useContext(ThemeContext);

  return <div className={theme}>{theme}</div>;
};

export default MyComponent;

3. 編寫一個測試文件來測試MyComponent組件。在這個例子中，我們將使用render函數來渲染組件，并使用screen對象來查詢DOM元素。然后，我們將使用toHaveClass方法來檢查組件是否具有正確的類名（即上下文的值）：

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

test('renders MyComponent with correct theme', () => {
  render(
   <ThemeContext.Provider value="dark">
      <MyComponent />
    </ThemeContext.Provider>
  );

  const componentElement = screen.getByText(/dark/i);
  expect(componentElement).toBeInTheDocument();
  expect(componentElement).toHaveClass('dark');
});

4. 運行測試：

npm test

這將運行你的測試并顯示結果。如果一切正常，你應該會看到測試通過，表明MyComponent組件正確地使用了useContext Hook并從ThemeContext接收了值。