{"id":656,"hash":"ab2fda37b42a9c4dc25dfe226b4e4eea855f4973db1014dd4b1b93cc8750d73c","pattern":"How to solve the &quot;update was not wrapped in act()&quot; warning in testing-library-react?","full_message":"I'm working with a simple component that does a side effect. My test passes, but I'm getting the warning Warning: An update to Hello inside a test was not wrapped in act(...)..\n\nI'm also don't know if waitForElement is the best way to write this test.\n\nMy component\n\nexport default function Hello() {\n  const [posts, setPosts] = useState([]);\n\n  useEffect(() => {\n    const fetchData = async () => {\n      const response = await axios.get('https://jsonplaceholder.typicode.com/posts');\n      setPosts(response.data);\n    }\n\n    fetchData();\n  }, []);\n\n  return (\n    <div>\n      <ul>\n        {\n          posts.map(\n            post => <li key={post.id}>{post.title}</li>\n          )\n        }\n      </ul>\n    </div>\n  )\n}\n\nMy component test\n\nimport React from 'react';\nimport {render, cleanup, act } from '@testing-library/react';\nimport mockAxios from 'axios';\nimport Hello from '.';\n\nafterEach(cleanup);\n\nit('renders hello correctly', async () => {\n  mockAxios.get.mockResolvedValue({\n    data: [\n        { id: 1, title: 'post one' },\n        { id: 2, title: 'post two' },\n      ],\n  });\n\n  const { asFragment } = await waitForElement(() => render(<Hello />));\n\n  expect(asFragment()).toMatchSnapshot();\n});","ecosystem":"npm","package_name":"reactjs","package_version":null,"solution":"Updated answer:\n\nPlease refer to @mikaelrs comment below.\n\nNo need for the waitFor or waitForElement. You can just use findBy* selectors which return a promise that can be awaited. e.g await findByTestId('list');\n\nDeprecated answer:\n\nUse waitForElement is a correct way, from the docs:\n\nWait until the mocked get request promise resolves and the component calls setState and re-renders. waitForElement waits until the callback doesn't throw an error\n\nHere is the working example for your case:\n\nindex.jsx:\n\nimport React, { useState, useEffect } from 'react';\nimport axios from 'axios';\n\nexport default function Hello() {\n  const [posts, setPosts] = useState([]);\n\n  useEffect(() => {\n    const fetchData = async () => {\n      const response = await axios.get('https://jsonplaceholder.typicode.com/posts');\n      setPosts(response.data);\n    };\n\n    fetchData();\n  }, []);\n\n  return (\n    <div>\n      <ul data-testid=\"list\">\n        {posts.map((post) => (\n          <li key={post.id}>{post.title}</li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n\nindex.test.jsx:\n\nimport React from 'react';\nimport { render, cleanup, waitForElement } from '@testing-library/react';\nimport axios from 'axios';\nimport Hello from '.';\n\njest.mock('axios');\n\nafterEach(cleanup);\n\nit('renders hello correctly', async () => {\n  axios.get.mockResolvedValue({\n    data: [\n      { id: 1, title: 'post one' },\n      { id: 2, title: 'post two' },\n    ],\n  });\n  const { getByTestId, asFragment } = render(<Hello />);\n\n  const listNode = await waitForElement(() => getByTestId('list'));\n  expect(listNode.children).toHaveLength(2);\n  expect(asFragment()).toMatchSnapshot();\n});\n\nUnit test results with 100% coverage:\n\n PASS  stackoverflow/60115885/index.test.jsx\n  ✓ renders hello correctly (49ms)\n\n-----------|---------|----------|---------|---------|-------------------\nFile       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s \n-----------|---------|----------|---------|---------|-------------------\nAll files  |     100 |      100 |     100 |     100 |                   \n index.jsx |     100 |      100 |     100 |     100 |                   \n-----------|---------|----------|---------|---------|-------------------\nTest Suites: 1 passed, 1 total\nTests:       1 passed, 1 total\nSnapshots:   1 passed, 1 total\nTime:        4.98s\n\nindex.test.jsx.snapshot:\n\n// Jest Snapshot v1\n\nexports[`renders hello correctly 1`] = `\n<DocumentFragment>\n  <div>\n    <ul\n      data-testid=\"list\"\n    >\n      <li>\n        post one\n      </li>\n      <li>\n        post two\n      </li>\n    </ul>\n  </div>\n</DocumentFragment>\n`;\n\nsource code: https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/60115885","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/60115885/how-to-solve-the-update-was-not-wrapped-in-act-warning-in-testing-library-re","votes":173,"created_at":"2026-04-19T04:51:27.262872+00:00","updated_at":"2026-04-19T04:51:27.262872+00:00"}