如何通过 react-testing-library 和 jest 测试使用基于 useContext 的自定义钩子的代码答案

【问题标题】：How to test code that uses a custom hook based on useContext with react-testing-library and jest如何通过 react-testing-library 和 jest 测试使用基于 useContext 的自定义钩子的代码
【发布时间】：2020-10-09 09:13:02
【问题描述】：

我创建了一个自定义上下文挂钩 - 我正在努力弄清楚如何在测试期间将值传递给它的提供者。

我的钩子：

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

const Context = createContext({});

export const ConfigurationProvider = ({ children }) => {
  // Use State to keep the values
  const [configuration, setConfiguration] = useState({});

  // pass the value in provider and return
  return (
    <Context.Provider
      value={{
        configuration,
        setConfiguration,
      }}
    >
      {children}
    </Context.Provider>
  );
};

export const useConfigurationContext = () => useContext(Context);
export const { Consumer: ConfigurationConsumer } = Context;

这是它在应用程序中的使用方式：

function App() {
  return (
    <ConfigurationProvider>
      <div className="app">
        <ComponentA />
      </div>
    </ConfigurationProvider>
  );
}

在组件A中：

const ComponentA = () => {
  // Get configuration
  const configuration = useConfigurationContext();

  return (
    <div>{JSON.stringify(configuration)}</div>
  )
}

这一切都很好 - 考虑到我正在从另一个组件调用 setConfiguration 并设置一个对象。现在进入测试部分：

import React, { Component, createContext } from 'react';
import { render, waitFor } from '@testing-library/react';
import ComponentA from 'componentA';

const config = {
  propertyA: 'hello',
};

test('renders the config', async () => {
  const ConfigurationContext = createContext();

  const { queryByText } = render(
    <ConfigurationContext.Provider value={config}>
      <ComponentA />
    </ConfigurationContext.Provider>
  );

  expect(queryByText('hello')).toBeInTheDocument();
});

这不起作用 - 我希望我发送的值将呈现在 div 中，但上下文是一个空对象。我做错了什么？

【问题讨论】：

问题是您在测试中使用的 Provider 与您的组件正在使用的不同。您的组件使用您的ConfigurationProvider，而您的测试创建一个新的Context 并使用它的Provider。

标签： reactjs testing react-hooks react-testing-library use-context

【解决方案1】：

感谢 Carle B. Navy，我知道了它不起作用的原因。对于其他人来说，有两个人想知道解决方案是什么，我通过执行以下操作来解决它：

在我的上下文挂钩中，我更改了最后一行以导出提供程序：

export const { Consumer: ConfigConsumer, Provider: ConfigProvider } = Context;

然后在我的测试用例中，我没有创建新的上下文，而是在顶部导入 ConfigProvider，然后：

const { queryByText } = render(
  <ConfigProvider value={config}>
    <ComponentA />
  </ConfigProvider>
);

感谢您帮助我解决此问题，希望这对其他人有所帮助。

【讨论】：