如何测试依赖于 useContext hook 的反应组件？

小能豆

如何测试依赖于 useContext hook 的反应组件？

javascript

我有一个组件，它使用useContext，然后它的输出取决于上下文中的值。一个简单的例子：

import React, { useContext } from 'react';

const MyComponent = () => {
  const name = useContext(NameContext);

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

当使用来自 react 和 jest 快照的浅渲染器测试此组件时。我该如何更改的值NameContext？

阅读 43

2024-06-06

共1个答案

小能豆

useContext当测试使用

MyComponent以下是测试com的示例

和复制代码import React, { useContext } from 'react';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

// Mock context value
const mockContextValue = 'John Doe';

// Mock context object
const mockContext = {
  Consumer: ({ children }) => children(mockContextValue),
};

// Mock useContext hook
jest.mock('react', () => ({
  ...jest.requireActual(
  ...je
'react'),
  useContext: jest.fn().mockImplementation(() => mockContextValue),
}));

describe('MyComponent', () => {
  it('should render with the correct context value', () => {
    const { container } = render(

      <mockContext.Provider value={mockContext}>
        <MyComp
<mockContext.Provider value={mockContext}>
        <MyComponent />
      </mockContext.Provider>
    );


    );

    e
expect(container.textContent).toBe(mockContextValue);
  });
});

在此示例中：

我们模拟期望从“NameC”接收的上下文值（mockContextValue）。MyComponent``NameContext
我们创建一个模拟上下文对象（mockContext），其中包含一个Consumer提供
我们useContext嘲笑
在测试用例中，我们MyComponent在 t 内进行渲染mockContext.Provider，它提供了
最后，我们断言MyComponentmatche的渲染输出

这种方法允许你在测试期间控制上下文值，并确保你的组件表现良好

2024-06-06