测试观察状态的 React 组件答案

【问题标题】：Testing React component that observes state测试观察状态的 React 组件
【发布时间】：2021-10-01 16:53:21
【问题描述】：

假设我有一个简单的 React 功能组件，它主要只是观察上下文的变化并从上下文中呈现一些状态视图。

export default function Observer(props) {
  // I have a separate dispatch context for performance. This component doesn't dispatch
  const state = useContext(SomeContext);
  
  return (
    <div>Foo is now {state.foo}</div>
  )
}

为了在 jest/react 测试库下进行测试，我设想了几种可能性：

为上下文连接一个包装器，它只是实例化不同的每个测试的状态。这似乎很容易和直接。这是典型的模式？
用真实的初始状态实例化每个测试。然后以某种方式改变状态并期望组件更新。也许以某种方式使用来自测试代码的调度。我看到的大多数例子都是火灾事件，但是这个组件不调度任何东西，它只是观察。
渲染应用程序的较大部分，以及更新状态的其他组件。对于小型、简单的单元测试来说，这似乎是一个糟糕的选择组件。

【问题讨论】：

标签： reactjs jestjs react-testing-library

【解决方案1】：

第一个选项是要走的路。正如您已经提到的，有问题的组件是上下文的消费者。所以，如果它为上下文提供了一些价值，它肯定会使用它。

您可以创建一个简单的函数来传递不同的上下文值，这些值是通过提供者提供并呈现的。然后你断言会发生什么，


const renderComponent = (contextValue) => {
  render(
    <SomeContextProvider value={contextValue}>
      <Observer />
    </SomeContextProvider>
  );
};

test('my test case name', () => {
  render({foo: abc});
  expect(screen.getByText('Foo is now abc')).toBeInTheDocument();
})

这里有一些很好的阅读https://testing-library.com/docs/example-react-context/

【讨论】：