title: Jest mock action creator result
body: <p>My component works fine. The issue is that I'm not able to test the second action creator in my useEffect.</p>
  <p>Here's my component:</p>
  <pre><code>//... some imports here
  
  const Layout = ({ children }) =&gt; {
    const dispatch = useDispatch();
  
    const account = useSelector((state) =&gt; state.account);
    const displayName = useSelector((state) =&gt; state.displayName);
  
    useEffect(() =&gt; {
      const fetchUserData = async () =&gt; {
        const token = await dispatch(updateUserContext());
        
        if (!!token) {
          dispatch(loadUserDetails({ token }));
        }
      };
  
      fetchUserData();
    }, [dispatch]);
  
    return (
        &lt;div id=&quot;app&quot;&gt;
         Some stuff here..
       &lt;/div&gt; 
  
  </code></pre>
  <p>What's not standard here is that I don't dispatch all the data I get from <code>updateUserContext</code> action creator. So you can see <code>token</code> is just returned back in the component.</p>
  <p>And in case we have token we want to run another <code>loadUserDetails</code> action creator.</p>
  <p>My issue is that I can't set up my test to make <code>loadUserDetails</code> run. For now, Jest says <code> Expected: {&quot;accessToken&quot;: &quot;some-token&quot;} Number of calls: 0</code></p>
  <p>my test:</p>
  <pre><code>import Layout from './layout.js';
  import { loadUserDetails, logInUser, updateUserContext } from '../store/actions';
  
  jest.mock('react-redux', () =&gt; ({
    ...jest.requireActual('react-redux'),
    useDispatch: jest.fn(() =&gt; () =&gt; {}),
    useEffect: jest.fn((fn) =&gt; fn()),
    useSelector: jest.fn((fn) =&gt; fn()),
  }));
  jest.mock('../store/actions', () =&gt; ({
    loadUserDetails: jest.fn(),
    logInUser: jest.fn(),
    updateUserContext: jest.fn(),
  }));
  
  describe('layout', () =&gt; {
    let account;
    let displayName;
  
    beforeEach(() =&gt; {
      account = null;
      displayName = null;
    });
  
  it('returns updateUserContext result', async () =&gt; {
      account = { username: 'some-username' };
  
      useSelector.mockReturnValueOnce(account);
      useSelector.mockReturnValueOnce(displayName);
      updateUserContext.mockResolvedValue(&quot;some-token&quot;);
  
      renderComponent();
      const result = await updateUserContext();
  
      expect(result).toBe(&quot;some-token&quot;);
    });
  
    it('calls loadUserDetails with updateUserContext result', async () =&gt; {
      account = { username: 'some-username' };
  
      useSelector.mockReturnValueOnce(account);
      useSelector.mockReturnValueOnce(displayName);
      updateUserContext.mockResolvedValue(&quot;some-token&quot;);
  
      renderComponent();
      const result = await updateUserContext();
  
      expect(loadUserDetails).toHaveBeenCalledWith({ accessToken: result });
    });
  
  const renderComponent = ({ ...rest } = {}) =&gt;
    render( &lt;Layout {...rest}&gt;{&lt;div&gt;some child&lt;/div&gt;}&lt;/Layout&gt; );
  </code></pre>
  <p>The first test passes, but not the second one.</p>
  <p>What I see is that in test <code>updateUserContext</code> result is set to <code>some-token</code>, but it's <code>undefined</code> in the component and I suspect that's why it does not go inside the <code>if statement</code> I have.</p>
  <p>So my question would be how to properly mock the <code>updateUserContext</code> result to properly test <code>loadUserDetails</code> action creator.</p>
  <p>Thank you!</p>