title: React testing library how to test button click dispatch action
body: <p>I'm using react testing library and redux.</p>
  <p>I have a component having a button to dispatch redux action to get post then display on the screen.</p>
  <pre><code>const { posts, name } = useSelector((state) =&gt; state.posts)
  const dispatch = useDispatch()
  const handleClick = useCallback(() =&gt; {
      dispatch(fetchPosts())
  }, [])
  return (
      &lt;div className=&quot;App&quot; data-test=&quot;appComponent&quot;&gt;
          &lt;button onClick={handleClick}&gt;get post&lt;/button&gt;
          &lt;section className=&quot;main&quot;&gt;
              &lt;div&gt;project name: {name}&lt;/div&gt;
              &lt;Main posts={posts} /&gt;
          &lt;/section&gt;
      &lt;/div&gt;
  )
  </code></pre>
  <p>on the testing file, what I want to test is that there is no text when page init load, after I click the button trigger the redux dispatch action, the screen should have text then.</p>
  <pre><code>describe(&quot;App test&quot;, () =&gt; {
      const useSelectorMock = jest.spyOn(reactRedux, &quot;useSelector&quot;)
      const useDispatchMock = jest.spyOn(reactRedux, &quot;useDispatch&quot;)
      beforeEach(() =&gt; {
          useSelectorMock.mockClear()
          useDispatchMock.mockClear()
      })
      afterEach(() =&gt; {
          jest.resetAllMocks()
          clearnup()
      })
  
      it(&quot;test redux render&quot;, () =&gt; {
          useSelectorMock.mockReturnValue({
              posts: [],
          })
          const dummyDispatch = jest.fn()
          useDispatchMock.mockReturnValue(dummyDispatch)
          render(&lt;App /&gt;)
          const post = screen.queryByText(&quot;abc&quot;)
          const button = screen.getByRole(&quot;button&quot;, {
              name: &quot;get post&quot;,
          })
          expect(post).toBeNull()
          userEvent.click(button)
        
  /* This is what I have tried.
  useSelectorMock.mockReturnValue({
      posts: [
          {
              title: &quot;and I am thing2!&quot;,
              body: &quot;abc&quot;,
          },
      ],
  })
  */
          const post2 = screen.getByText(&quot;abc&quot;)
          expect(post2).toBeInTheDocument()
      })
  </code></pre>
  <p>I have the init mock selector value, so the test of <code>post</code> is <code>null</code> is pass. However, when I trigger <code>userEvent.click</code>, it is not like the basic userEvent click to call a function then change the render. So the <code>post2</code> is not working. I tried to change the useSelectorMock.mockReturnValue after button click trigger and want the selector value changes to the new one and render on screen too. But it's not working. I can only test the original selector value, but cannot test the updated new one.</p>
  <p>How can I test the <code>dispatch</code> with <code>react testing library</code>?</p>