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 接收并显示值。