How to solve the "update was not wrapped in act()" warning in testing-library-react?

Updated answer:

Please refer to @mikaelrs comment below.

No 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');

Deprecated answer:

Use waitForElement is a correct way, from the docs:

Wait 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

Here is the working example for your case:

index.jsx:

import React, { useState, useEffect } from 'react';import axios from 'axios';export default function Hello() {  const [posts, setPosts] = useState([]);  useEffect(() => {    const fetchData = async () => {      const response = await axios.get('https://jsonplaceholder.typicode.com/posts');      setPosts(response.data);    };    fetchData();  }, []);  return (    <div>      <ul data-testid="list">        {posts.map((post) => (          <li key={post.id}>{post.title}</li>        ))}      </ul>    </div>  );}

index.test.jsx:

import React from 'react';import { render, cleanup, waitForElement } from '@testing-library/react';import axios from 'axios';import Hello from '.';jest.mock('axios');afterEach(cleanup);it('renders hello correctly', async () => {  axios.get.mockResolvedValue({    data: [      { id: 1, title: 'post one' },      { id: 2, title: 'post two' },    ],  });  const { getByTestId, asFragment } = render(<Hello />);  const listNode = await waitForElement(() => getByTestId('list'));  expect(listNode.children).toHaveLength(2);  expect(asFragment()).toMatchSnapshot();});

Unit test results with 100% coverage:

 PASS  stackoverflow/60115885/index.test.jsx  ✓ renders hello correctly (49ms)-----------|---------|----------|---------|---------|-------------------File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s -----------|---------|----------|---------|---------|-------------------All files  |     100 |      100 |     100 |     100 |                    index.jsx |     100 |      100 |     100 |     100 |                   -----------|---------|----------|---------|---------|-------------------Test Suites: 1 passed, 1 totalTests:       1 passed, 1 totalSnapshots:   1 passed, 1 totalTime:        4.98s

index.test.jsx.snapshot:

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

source code: https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/60115885