title: Access and modify react context from jest test with react testing library
body: <p>I've been fighting this for a few days now and I can't get the righ way of doing what I need.
  Basically I have a context that provides a theme fetched from an API. The context has the values of theme, loading, and functions to fetch and update the loading state. It looks like so:</p>
  <pre><code>
  import React, { useState } from &quot;react&quot;;
  
  import ThemeService from &quot;../services/GetThemes&quot;;
  
  const AvailableThemesContext = React.createContext();
  const { Provider, Consumer } = AvailableThemesContext;
  
  const ThemesProvider = ({ children }) =&gt; {
    const [contextTheme, setTheme] = useState({});
    const [loading, setLoading] = useState(true);
  
    function handleData(data) {
      setTheme(data);
      setLoading(false);
    }
  
    function fetchThemes() {
      setLoading(true);
      new ThemeService().getData(handleData);
    }
  
    function refresh(data) {
      setTheme(data);
    }
  
    return (
      &lt;Provider value={{ contextTheme, fetchThemes, refresh, setLoading, }}&gt;
        {children}
      &lt;/Provider&gt;
    );
  };
  
  export { ThemesProvider, Consumer as ThemeConsumer, AvailableThemesContext };
  
  
  </code></pre>
  <p>This is how I provide said context to the App in the index.js file:</p>
  <pre><code>
  import { ThemesProvider } from &quot;./context/ThemeProvider&quot;;
  
  ReactDOM.render(
    &lt;ThemesProvider value={{}}&gt;
     &lt;App /&gt;
    &lt;/ThemesProvider&gt;,
    document.getElementById(&quot;root&quot;)
  );
  
  </code></pre>
  <p>In the child component, there is a <code>useEffect</code> that looks at the <code>loading</code>state to render a spinner or some other stuff. As default renders the spinner. Then I try to change the state of <code>loading</code> to <code>false</code> but I can't manage to do so.</p>
  <p>Here is my test:</p>
  <pre><code>
  import React from &quot;react&quot;;
  // import { render } from &quot;@testing-library/react&quot;;
  import { render, screen } from &quot;./test-utils&quot;;
  import CalendarView from &quot;../views/CalendarView&quot;;
  import AvailableThemesContext from &quot;../context/ThemeProvider&quot;;
  
  const { loading } = AvailableThemesContext;
  
  describe(&quot;&lt;CalendarView /&gt;&quot;, () =&gt; {
    test(&quot;It renders without crashing&quot;, async () =&gt; {
      const { getByLabelText } = render(&lt;CalendarView /&gt;);
      expect(getByLabelText(&quot;audio-loading&quot;)).toBeInTheDocument(); 
      // ---&gt; This looks for the loader ands resolves OK
    });
  
    test(&quot;It renders without crashing&quot;, () =&gt; {
      const renderComponent = render(
       &lt;ThemeProvider value={{ loading: false}}&gt;
         &lt;CalendarView /&gt;);
       &lt;/ThemesProvider&gt;
      expect(renderComponent.getByTestId(&quot;picker-component&quot;)).toBeInTheDocument();
    });
  
  });
  
  
  </code></pre>
  <p>For more that I try to inject the new state the component never sees the change.</p>
  <p>Help please?</p>