在 Jest 测试中确保用户操作触发 Recoil 状态更新的模式是什么

如何解决在 Jest 测试中确保用户操作触发 Recoil 状态更新的模式是什么

假设我有一个（相当人为的）控制器和视图

const useController = () => {
  const setId = useSetRecoilState(idState)
  return {
    setId
  }
}

const MyComponent = () => {
  const { setId } = useController()
  return (
    <button onClick={() => setId(1)}>Click me!</button>
  )
}

什么是正确的测试模式

describe('my component',() => {
  test.todo('when click button,state updated to 1')
})

当我有一个设置状态的组件并且我想验证该组件实际上正在更新状态（例如，通过 <input> 并且我没有忘记将反冲设置器添加到 onChange 事件处理程序中。

我可以想象在自定义包装器中渲染被测组件，该包装器将整个状态设置为 INPUT 的值或其他内容，然后在我的测试中我获得了 INPUT 的值并获得了状态，但是有没有更好的方法?

我猜我基本上是想窥探原子的二传手。

编辑为澄清起见，我遵循甚至反冲测试库所说的内容：如果您正在测试仅用于一个组件的钩子，则应将它们一起测试。所以我的“单元测试”将单元视为“控制器作为钩子”和组件（视图）。

解决方法

你不需要监视任何东西。只需通过 react-test-library 在组件或钩子上 act 并触发一个动作。然后，您可以使用反冲 snapshot_UNSTABLE() 生成反冲状态的新快照，然后您可以根据预期值测试原子、选择器等的值，如下所示：

const initialSnapshot = snapshot_UNSTABLE();
expect(initialSnapshot.getLoadable(idState).valueOrThrow()).toBe(0);

act(() => {/* act on your component or hook to mutate the state */});

const nextSnapshot = snapshot_UNSTABLE();
expect(nextSnapshot.getLoadable(idState).valueOrThrow()).toBe(1);