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