reactjs - 禁用“未包含在行为中”或一般等待组件“安定下来”以避免“未包含在行为中”警告？

Question

我有一个组件可以从 API 中获取某些行为（有时是 init）并根据响应进行更新。

在一项测试中，我想验证 API 被调用了 3 次，而不验证状态更新。（在这种情况下，它不会更新状态，而是将某些内容存储在反冲原子中。）

所以我只是设置了一个 Jest 间谍然后expect(spy).toHaveBeenCalledTimes(3)

问题是在这种情况下，第三个结果不会改变 UI，所以我等不及 UI 更新，所以我得到“警告：测试中对 MyComponent 的更新未包装在 act(. ..)”

有没有办法抑制这种情况或告诉测试在结束测试之前等待组件“稳定下来”？这不相关，因为我只是检查是否调用了 3 次间谍函数。但我不希望这个警告弄乱我的测试控制台输出。

act我什至尝试像警告建议的那样包装触发 API 调用的函数。仍然发出警告。

代码看起来像这样：

const useController = () => {
  useEffect(() => { onClick().then(updateVariousStateStuff) }, [])

  const onClick = () => {
    myApiFunction().then(updateVariousStateStuff)
  }
}

const MyComponent = () => {
  const state = useController ()
  return (<>
    <button data-testid="one" onClick={state.onClick}>one</button>
    <button data-testid="two" onClick={state.onClick}>two</button>
  </>)
}

describe('MyComponent', () => {
  test('blah', async () => {
    const spy = jest.spyOn(api, 'myApiFunction')
    const { getByTestId } = setupThatRendersComponent()
    fireEvent.click(getByTestId('one'))
    fireEvent.click(getByTestId('two'))
    await waitFor(() => expect(spy).toHaveBeenCalledTimes(3))
  })
})

Init 调用 API。第二次单击“一个”调用。单击“两个”调用第三个。我正在验证 init 和 clicks 是否都调用了 API。我不在乎结果。

测试通过。但发出警告。我不想要警告。有没有办法抑制它，或者让它消失？

await act(() => fireEvent.click(getByTestId('two')))

即使将更新触发器包装在实际中，也不会让它消失。

我看了看，找不到另一篇关于这个的帖子，这不是有人犯了不同的错误。例如，这乍一看就像是同样的问题，但事实证明该人确实想测试组件更新。

标签： reactjsjestjsreact-testing-library