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

Question

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(...)..

I'm also don't know if waitForElement is the best way to write this test.

My component

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>         {           posts.map(             post => <li key={post.id}>{post.title}</li>           )         }       </ul>     </div>   ) }  

My component test

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

Answer 1

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 total Tests:       1 passed, 1 total Snapshots:   1 passed, 1 total Time:        4.98s 

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> `; 

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