React Testing Course for Beginners – Code and Test 3 Apps
React Testing Course for Beginners – Code and Test 3 Apps

Hi,
Can anybody explain to me the use of act() utility provided by React for testing? In official documentation of React, it is stated that utilities provided by react testing library are wrapped with act() . Can anyone explain which utilities is it talking about? Do I need to use act() with react testing library?
I was testing a component with jest and react testing library, although the test case passed, but I am getting the following error in console

Can anyone explain the above error?

/* Searchbar.js */ // @flow import React, { useReducer } from 'react'; import SearchIcon from './SearchIcon'; import CloseIcon from './CloseIcon'; import { searchBarReducer } from '../reducers'; import { swapLoading, updateSearchText, updateSuggestions, updateLoadedOnce, } from '../actions'; import { ClipLoader } from 'react-spinners'; import { searchSuggestions } from '../utils/api'; import Suggestion from './Suggestion'; import NoResults from './NoResults'; const Searchbar = () => { const [state, dispatch] = useReducer(searchBarReducer, { loading: false, suggestions: [], searchText: '', loadedOnce: false, }); return ( <> <div className='container-fluid mt-avoid'> <div className='row'> <div className='col px-0'> <div className='px-custom d-flex bg-white border-bottom'> <SearchIcon color='#000000' classes='search-icon-small' /> <input type='text' className='form-control mx-2 search-input' placeholder='Search for a movie, tv show, person...' autoFocus onChange={(evt) => { dispatch( updateSearchText(evt.target.value) ); dispatch(swapLoading()); searchSuggestions(evt.target.value).then( (suggestions) => { if (suggestions.length > 10) suggestions = suggestions.slice( 0, 10 ); dispatch( updateSuggestions(suggestions) ); dispatch(swapLoading()); dispatch(updateLoadedOnce(true)); } ); }} /> {state.searchText ? ( state.loading ? ( <ClipLoader size={20} css='margin-top : 0.8rem;' /> ) : ( <CloseIcon color='#000000' classes='close-icon-small ml-3 pointer' onClick={() => { dispatch(updateSuggestions([])); dispatch(updateLoadedOnce(false)); }} /> ) ) : null} </div> </div> </div> </div> {state.loadedOnce ? ( state.suggestions.length > 0 ? ( state.suggestions.map((suggestion) => { return ( <Suggestion id={suggestion.id} name={suggestion.name} key={suggestion.id} /> ); }) ) : ( <NoResults /> ) ) : null} </> ); }; export default Searchbar;

/* Searchbar.test.js */ import React from 'react'; import Searchbar from '../atomic/Searchbar'; import { render, fireEvent } from '@testing-library/react'; import { searchSuggestions } from '../utils/api'; import { BrowserRouter as Router } from 'react-router-dom'; jest.mock('../utils/api.js'); beforeAll(() => { const suggestions = [ { id: 1234, name: 'DDLJ' }, { id: 1235, name: 'Fast and Furious' }, { id: 1236, name: 'Friends' }, ]; searchSuggestions.mockResolvedValue(suggestions); }); test('user input updates on typing', () => { // Arrange const { getByPlaceholderText } = render( <Router> <Searchbar /> </Router> ); const searchInput = getByPlaceholderText(/search for a movie/i); // Act fireEvent.change(searchInput, { target: { value: 'Hang' } }); // Assert expect(searchInput.value).toBe('Hang'); });

You are watching: Do we need to use act() function with react testing library?. Info created by GBee English Center selection and synthesis along with other related topics.