测试观察状态的 React 组件

Question

假设我有一个简单的 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测试库下测试，我设想了几种可能：

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

Answer 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/

测试观察状态的 React 组件

Testing React component that observes state

reactjs

jestjs

react-testing-library