Jest測試React Context API

Jest 是一個流行的 JavaScript 測試框架，可以與 React 項目中的 Context API 一起使用

1. 首先，確保你已經安裝了所需的依賴項：

npm install --save react react-dom
npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react react-test-renderer

2. 在項目根目錄下創建一個名為 .babelrc 的文件，并添加以下內容：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

3. 在 src 目錄下創建一個名為 context.js 的文件，用于定義 Context：

import React from 'react';

const MyContext = React.createContext();

export default MyContext;

4. 創建一個名為 MyProvider.js 的文件，用于包裝組件并提供 Context 值：

import React from 'react';
import MyContext from './context';

const MyProvider = ({ children }) => {
  const value = 'Hello, world!';

  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
};

export default MyProvider;

5. 創建一個名為 MyComponent.js 的文件，用于使用 Context：

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

const MyComponent = () => {
  const value = useContext(MyContext);

  return <div>{value}</div>;
};

export default MyComponent;

6. 最后，創建一個名為 MyComponent.test.js 的文件，用于編寫 Jest 測試：

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

describe('MyComponent', () => {
  it('renders the value from MyContext', () => {
    const { getByText } = render(
      <MyProvider>
        <MyComponent />
      </MyProvider>
    );

    expect(getByText('Hello, world!')).toBeInTheDocument();
  });
});

現在，你可以運行 npm test 命令來執行測試。這將會測試 MyComponent 是否正確地從 MyContext 接收并顯示值。