title: How to call useEffect by updating values in a Context provider with react testing library?
body: <p>What I'm trying is to test if a component, which depends on a context, calls <code>useEffect</code> and a function (mocked by <code>jest.fn()</code>) is called from there.</p>
  <p>Here's a simplified version of my code:</p>
  <p><code>MyComponent.tsx</code></p>
  <pre><code>export function MyComponent() {
      const ref = createRef();
      const { date } = useMyContext(); // &quot;date&quot; is a string (e.g. `2021-11-01`) 
  
      useEffect(() =&gt; {
          if (date &amp;&amp; ref.current) 
              ref.current.scrollIntoView();
      }, [date, ref]);
  
      return (
          &lt;div&gt;
              {/* some other elements are here */}
              &lt;AnotherComponent ref={ref} /&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  <p><code>MyComponent.test.tsx</code></p>
  <pre><code>it('should scroll into AnotherComponent when date is updated', () =&gt; {
      const mockContextValue = { date: '2021-11-01' };
      window.HTMLElement.prototype.scrollIntoView = jest.fn();
  
      render(
          &lt;MyContext.Provider value={mockContextValue}&gt;
              &lt;MyComponent /&gt;
          &lt;/MyContext.Provider&gt;,
      );
  
      // update the date in MyContext.Provider 
  
      // then, useEffect should be called
  
      // then, expect scrollIntoView was called
  });
  </code></pre>
  <p>I'm clueless as to how to</p>
  <ol>
  <li>update the <code>date</code> value in <code>MyContext</code> after <code>MyComponent</code> is rendered by the render function of <code>@testing-library/react</code></li>
  <li>see if <code>useEffect</code> was called after the <code>date</code> was updated</li>
  </ol>
  <p>I've been googling for hours and hours, but haven't found any solution.
  Any advice will be appreciated.</p>