0

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

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 的值并且我有状态，但是有更好的方法吗？

我想我基本上是想监视原子的二传手。

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

4

1 回答 1

0

你不需要监视任何东西。只需act通过 react-test-library 在组件或钩子上并触发操作。然后，您可以使用 recoilssnapshot_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);
于 2021-05-25T07:47:21.080 回答