Javascript 如何避免；法案；带有React测试库的集成测试中的警告

我在对我的单页应用程序进行集成测试时呈现该组件，并尝试沿着一条快乐的路径从在页面上登录到测验/记忆游戏的第一个问题

Warning: An update to GamePlay inside a test was not wrapped in act(...).

第二行是触发多个警告的行

    const firstItem = getAllByRole("listitem")[0]
    userEvent.click(firstItem)

它单击列表中的第一个选项，该选项导致游戏性组件渲染。该组件显示一个单词5000毫秒，然后使用组件的useEffect挂钩（如下）中设置的setTimeout将其隐藏。应答输入字段在此例程中也被禁用和启用

    function hideQuestion() {
        setInputDisabled(false)
        setDisplayWord(false)
    }

    const [displayWord, setDisplayWord]= useState(true);

    useEffect(()=>{
        setTimeout(hideQuestion, 5000)
    },[displayWord])

    const [inputDisabled, setInputDisabled] = useState(true);

从周围的阅读来看，我认为这可能是使用setTimeout的原因，但我尝试过的缓解措施都没有起到任何作用。我试着用一个“act”函数包装单击行，但没有任何效果。我尝试使测试异步，并等待该行，但再次没有做什么-我仍然得到这个错误（和一些类似的）

我试着读这篇文章：

但我正在努力完全理解它，并将其与我自己的代码联系起来。我认为它的要点是，当出现“意外”状态变化时，您将收到这些警告，但我不知道我应该如何使我的状态发生预期的变化。我的应用程序是一个实时游戏，所以整个过程都是由计时器完成的——一个计时器完成，另一个计时器启动。我不想在游戏中花整整10分钟的时间，这样游戏就可以干净利落地结束了。我只想测试从登录页到第一次交互的核心集成逻辑

---

现在我所能想到的就是用一个问题制作一个测试夹具，这样我就可以端到端地运行整个游戏，但是当我当前的测试运行良好（除了警告）并且完成了我现在想要它做的所有事情时，这似乎有点过头了。我很感激任何指点或建议，即使我只是找错了方向。谢谢

以下是您可以做的几件事：

• 警告告诉您，您的应用程序在测试完成后继续运行，因此在运行过程中发生了其他您没有签入测试且没有等待的事情。所以，如果你对你正在测试的东西感到满意，就要被警告并保持这样
• 通过提供选项，你可以让你的应用程序更易于测试。例如，您可以有一个可选的道具，指示计时器中等待的时间量，以便您可以在测试中将其设置为0或一个小数字
• 您可以模拟计时器：

beforeach（开玩笑使用faketimers）；
每次之后（开玩笑的用户计时器）；
测试（“您的游戏”，异步（）=>{
常量{getAllByRole}=render（）；
// [...]
const firstItem=getAllByRole（“listitem”）[0]
userEvent.click（第一项）
act（（）=>开玩笑提前计时（5000））；
// [...]
act（（）=>开玩笑提前计时（5000））；
// [...]
});

userEvent之后有什么内容。单击

line？想分享触发警告的完整测试吗？@juliomalves-没有别的了。是的，但是我把它全部注释掉了，错误仍然存在。在后面的几行中，我只得到了更多相同类型的警告。测试本身就完成并通过了。所以我写了一个测试夹具来缩短游戏时间，并且我通过了测试，一直玩到最后。一旦我完成了，将advanceTimers函数放在“act”函数中就成功了。非常感谢你的帮助！
  console.error
    Warning: An update to GamePlay inside a test was not wrapped in act(...).
    
    When testing, code that causes React state updates should be wrapped into act(...):
    
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */
    
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
        at GamePlay (/home/user/code/spellingapp/src/components/GamePlay.js:3:20)
        at MainPage (/home/user/code/spellingapp/src/components/MainPage.js:8:29)
        at Route (/home/user/code/spellingapp/node_modules/react-router/cjs/react-router.js:470:29)
        at Switch (/home/user/code/spellingapp/node_modules/react-router/cjs/react-router.js:676:29)
        at Router (/home/user/code/spellingapp/node_modules/react-router/cjs/react-router.js:99:30)
        at BrowserRouter (/home/user/code/spellingapp/node_modules/react-router-dom/cjs/react-router-dom.js:67:35)
        at App (/home/user/code/spellingapp/src/App.js:16:29)

       5 |   function hideQuestion() {
       6 |     // console.log("I have hidden the word and enabled the text box")
    >  7 |     setInputDisabled(false)