Jest測試React組件的Context

在Jest中測試使用了Context的React組件，需要確保在測試環境中正確地設置和傳遞Context

1. 首先，創建一個名為MyContext.js的文件，其中包含你的Context：

import React from 'react';

const MyContext = React.createContext();

export default MyContext;

2. 然后，創建一個名為MyProvider.js的文件，其中包含提供Context的組件：

import React, { useState } from 'react';
import MyContext from './MyContext';

const MyProvider = ({ children }) => {
  const [value, setValue] = useState('default value');

  return (
    <MyContext.Provider value={{ value, setValue }}>
      {children}
    </MyContext.Provider>
  );
};

export default MyProvider;

3. 接下來，創建一個名為MyComponent.js的文件，其中包含使用Context的組件：

import React, { useContext } from 'react';
import MyContext from './MyContext';

const MyComponent = () => {
  const { value, setValue } = useContext(MyContext);

  return (
    <div>
      <p>Current value: {value}</p>
     <button onClick={() => setValue('new value')}>Change value</button>
    </div>
  );
};

export default MyComponent;

4. 最后，創建一個名為MyComponent.test.js的文件，其中包含使用Jest和React Testing Library測試組件的代碼：

import React from 'react';
import { render, fireEvent, screen } from '@testing-library/react';
import MyComponent from './MyComponent';
import MyProvider from './MyProvider';

describe('MyComponent', () => {
  it('renders the default value and updates it when the button is clicked', () => {
    render(
      <MyProvider>
        <MyComponent />
      </MyProvider>
    );

    expect(screen.getByText('Current value: default value')).toBeInTheDocument();

    fireEvent.click(screen.getByText('Change value'));

    expect(screen.getByText('Current value: new value')).toBeInTheDocument();
  });
});

在這個例子中，我們使用MyProvider將MyComponent包裹起來，以便在測試環境中提供正確的Context。然后，我們使用React Testing Library的render、fireEvent和screen方法來渲染組件、模擬點擊事件并檢查屏幕上的文本是否符合預期。