How to mock a single state variable in a context provider with jest?

在使用 Jest 进行单元测试时，如果我们的组件依赖于上下文提供的状态变量，我们需要确保在测试环境中有效地模拟这些状态变量。这里，我将用一个具体的例子来说明如何模拟 React 上下文中的单个状态变量。

假设我们有一个名为 ThemeContext 的上下文，它提供了一个名为 theme 的状态变量和一个修改该变量的函数 setTheme。我们的目标是在不改变全局状态的情况下，为测试目的模拟这个 theme 变量。

步骤 1: 创建上下文

首先，我们创建一个 ThemeContext。

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

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}

步骤 2: 编写组件

假设我们有一个简单的组件，它依赖于 ThemeContext。

javascript
import React from 'react';
import { useTheme } from './ThemeContext';

function Greeting() {
  const { theme } = useTheme();

  return <h1 className={theme}>Hello, world!</h1>;
}

export default Greeting;

步骤 3: 模拟上下文进行测试

当我们需要测试这个 Greeting 组件时，我们可以使用 Jest 和 @testing-library/react 来模拟 ThemeContext。

javascript
import React from 'react';
import { render } from '@testing-library/react';
import Greeting from './Greeting';
import { ThemeContext } from './ThemeContext';

test('Greeting component receives theme', () => {
  // 设置我们的模拟上下文值
  const themeValue = { theme: 'dark' };

  // 使用 Jest 的 mockImplementation 方法模拟 useContext
  jest.spyOn(React, 'useContext').mockImplementation(() => themeValue);

  const { getByText } = render(<Greeting />);

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

在这个测试中，我们通过 jest.spyOn 来截获 React.useContext 调用，并确保它返回我们预设的 themeValue。这样，无论 useTheme 钩子内部怎样调用 useContext，它都会接收到我们为测试目的而设定的 theme 值。

这种方法的优点是我们可以精确控制上下文中的值，而且不需要实际渲染提供者组件，使得测试更快并且隔离于其它状态变化。这对于单元测试来说非常适用。