How to mock react context in Jest

在使用 Jest 来进行 React 应用的测试时，有时我们需要 mock 整个 React Context，以便能够独立测试组件而不受外部数据的影响。下面我将详细说明如何使用 Jest 来 mock React Context。

步骤 1: 创建你的 React Context

假设我们有一个这样的 React Context：

javascript
import React, { createContext, useContext } from 'react';

const MyContext = createContext();

export const useMyContext = () => useContext(MyContext);

export const MyProvider = ({ children }) => {
  const value = { someData: 'original data' };
  
  return (
    <MyContext.Provider value={value}>
      {children}
    </MyContext.Provider>
  );
};

这里，MyProvider 是一个 Context Provider，它向下层组件提供一些数据。

步骤 2: 在 Jest 中 Mock React Context

当我们需要在测试中模拟这个 Context，以便控制传递给组件的数据时，我们可以这样做：

1. 创建一个测试文件，比如 MyComponent.test.js。
2. 引入必要的模块，包括 React、要测试的组件、要 mock 的 hooks 等。
3. 使用 jest.mock() 来模拟 useContext。

例如：

javascript
import React from 'react';
import { render, screen } from '@testing-library/react';
import { useMyContext } from './MyContext'; // 导入我们的自定义 hook
import MyComponent from './MyComponent';

jest.mock('./MyContext', () => ({
  useMyContext: jest.fn(),
}));

describe('MyComponent', () => {
  it('should display mock data from context', () => {
    // 设定 useMyContext 返回的 mocked 值
    useMyContext.mockReturnValue({ someData: 'mocked data' });

    // 渲染组件
    render(<MyComponent />);

    // 测试组件是否渲染了被 mock 的数据
    expect(screen.getByText(/mocked data/i)).toBeInTheDocument();
  });
});

在这个示例中，我们使用 jest.mock() 来拦截 ./MyContext 模块的导入，并提供一个自定义的实现，即 useMyContext 返回一个 mock 的值。这样，当 MyComponent 调用 useMyContext() 时，它将接收到我们在测试中指定的 mock 值。

总结

这种方法允许我们在不改变组件代码的情况下控制 Context 中的值，非常适合测试那些依赖于外部数据的组件。通过 mock 掉 React Context，我们可以为组件提供任何我们想要的测试场景，从而确保组件能够在不同的状态下正常工作。