title: How to test redux state update with react testing library and jest
body: <p>I'm trying to write a test with jest and react testing library to see if the store updates a state and the new state is shown inside the component.</p>
  <p>I have a component like:</p>
  <pre><code>import { getName } from 'src/store/actions/hello/getName';
  
  const HelloComponent = () =&gt; {
      const dispatch = useDispatch();
      const { name, isLoading } = useSelector((state:RootState) =&gt; state.Hello)
      useEffect( () =&gt; {
         dispatch(getName());
      }, []);
      return (
          &lt;div&gt;
               { name &amp;&amp;
                 Hello {name}
               }
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>There is the store which calls an API like:</p>
  <pre><code>const getName = () =&gt; (dispatch) =&gt; {
    const URL = getUrl()
    fetch(URL, {method: 'GET'})
      .then((response) =&gt; response.json())
      .then(({ data }) =&gt; dispatch({
        type: 'SAVE_NAME',
        payload: data.name
      })) # This action updates the name inside the redux state
  };
  </code></pre>
  <p>I'm using mswjs to mock the API call and I'd like to test that after the component mount, the DOM shows 'Hello John'.</p>
  <p>This is the test I've written, but it doesn't work:</p>
  <pre><code>it('shows the name', async () =&gt; {
     const {findByText} = renderWithStore(&lt;HelloComponent /&gt;);
     expect(await findByText('Hello John')).toBeInTheDocument();
  });
  
  </code></pre>
  <p>renderWithStore mocks the store.</p>
  <pre><code>import configureStore from 'redux-mock-store';
  import { render as rtlRender } from '@testing-library/react'
  import { initialState as Hello } from '../src/store/reducers/helloReducer';
  
  
  const mockStore = configureStore()
  
  const initialStateMock = {
     Hello
  }
  function render(
    ui
  ) {
    const store = mockStore(initialStateMock);
    function Wrapper({ children }) {
      return &lt;Provider store={store}&gt;{children}&lt;/Provider&gt;
    }
    return rtlRender(ui, { wrapper: Wrapper })
  }
  </code></pre>
  <p>It seems like it doesn't wait for the state to update.</p>
  <p>any help is much appreciated</p>
  <p>Thanks</p>