Reactjs 如何解决这个问题；更新未包装在act（）中；测试库中的警告？

我正在使用一个简单的组件，它会产生副作用。我的测试通过了，但是我得到了警告

警告：测试中对Hello的更新没有包装在act（…）中。

我也不知道

waitForElement

是否是编写此测试的最佳方法

我的组件

导出默认函数Hello（）{
const[posts，setPosts]=useState（[]）；
useffect（（）=>{
const fetchData=async（）=>{
const response=等待axios.get（'https://jsonplaceholder.typicode.com/posts');
设置柱（响应数据）；
}
fetchData（）；
}, []);
返回(

{
posts.map(
post=>
{post.title}
)
}

)
}

我的组件测试

从“React”导入React；
从'@testing library/react'导入{render，cleanup，act}；
从“axios”导入mockAxios；
从“”导入Hello；
每次之后（清理）；
它（'正确呈现hello'，异步（）=>{
mockAxios.get.mockResolvedValue({
数据：[
{id:1，标题：'post one'}，
{id:2，标题：'post two'}，
],
});
const{asFragment}=wait waitForElement（（）=>render（））；
expect（asFragment（））.toMatchSnapshot（）；
});

更新答案：

请参阅下面的@mikaelrs评论

不需要waitFor或waitForElement。您只需使用findBy*选择器，它返回一个可以等待的承诺。e、 g等待findByTestId（“列表”）

---

不推荐的答案：

使用

waitForElement

是一种正确的方法，从以下文档：

等待模拟的

get

请求承诺解析，组件调用setState并重新呈现

waitForElement

等待回调没有抛出错误

以下是您案例的工作示例：

index.jsx

：

import React，{useState，useffect}来自“React”；
从“axios”导入axios；
导出默认函数Hello（）{
const[posts，setPosts]=useState（[]）；
useffect（（）=>{
const fetchData=async（）=>{
const response=等待axios.get（'https://jsonplaceholder.typicode.com/posts');
设置柱（响应数据）；
};
fetchData（）；
}, []);
返回(

{posts.map（（post）=>(
{post.title}
))}

);
}

index.test.jsx

：

从“React”导入React；
从'@testing library/react'导入{render，cleanup，waitForElement}；
从“axios”导入axios；
从“”导入Hello；
开玩笑的模仿（‘axios’）；
每次之后（清理）；
它（'正确呈现hello'，异步（）=>{
axios.get.mockResolvedValue({
数据：[
{id:1，标题：'post one'}，
{id:2，标题：'post two'}，
],
});
const{getByTestId，asFragment}=render（）；
const listNode=wait waitForElement（（）=>getByTestId（'list'）；
expect（listNode.children）.toHaveLength（2）；
expect（asFragment（））.toMatchSnapshot（）；
});

100%覆盖率的单元测试结果：

PASS stackoverflow/60115885/index.test.jsx
✓ 正确呈现hello（49毫秒）
-----------|---------|----------|---------|---------|-------------------
文件|%Stmts |%Branch |%Funcs |%Line |未覆盖行|s
-----------|---------|----------|---------|---------|-------------------
所有文件| 100 | 100 | 100 | 100 |
index.jsx | 100 | 100 | 100 | 100 |
-----------|---------|----------|---------|---------|-------------------
测试套件：1个通过，共1个
测试：1项通过，共1项
快照：1个通过，共1个
时间：4.98秒

index.test.jsx.snapshot

：

// Jest Snapshot v1

exports[`renders hello correctly 1`] = `
<DocumentFragment>
  <div>
    <ul
      data-testid="list"
    >
      <li>
        post one
      </li>
      <li>
        post two
      </li>
    </ul>
  </div>
</DocumentFragment>
`;

//Jest快照v1
导出[`正确呈现hello 1`]=`


张贴一


第二站


`;

---

源代码：

btw

waitForElement

现在已被弃用。他们建议从“@testing library/react”导入{waitFor}。回答得好！waitFor需要模拟html元素的属性：

await userEvent.type（r.getByRole（'textbox'），'a'）；const fullScreenSection=wait waitFor（（）=>r.getByTestId（'fullScreenSection'）；fullScreenSection.requestFullscreen=jest.fn（）不需要
waitFor
或
waitForElement
。您只需使用
findBy*
选择器，它返回一个可以等待的承诺。e、 g
await findByTestId（'list'）