title: Testing useContext() with react-testing-library
body: <p>I think I found another way to test a component using the <code>useContext</code> hook. I have seen a few tutorials that test if a value can be successfully passed down to a child component from a parent Context Provider but did not find tutorials on the child updating the context value.</p>
  <p>My solution is to render the root parent component along with the provider, because the state is ultimately changed in the root parent component and then passed to the provider which then passes it to all child components. Right?</p>
  <p>The tests seem to pass when they should and not pass when they shouldn't.
  Can someone explain why this is or isn't a good way to test the <code>useContext</code> hook?</p>
  <p>The root parent component:</p>
  <pre><code>...
  const App = () =&gt; {
    const [state, setState] = useState(&quot;Some Text&quot;)
  
    const changeText = () =&gt; {
      setState(&quot;Some Other Text&quot;)
    }
  ...
  
    &lt;h1&gt; Basic Hook useContext&lt;/h1&gt;
       &lt;Context.Provider value={{changeTextProp: changeText,
                                 stateProp: state
                                   }} &gt;
          &lt;TestHookContext /&gt;
       &lt;/Context.Provider&gt;
  )}
  </code></pre>
  <p>The context object:</p>
  <pre><code>import React from 'react';
  
  const Context = React.createContext()
  
  export default Context
  </code></pre>
  <p>The child component:</p>
  <pre><code>import React, { useContext } from 'react';
  
  import Context from '../store/context';
  
  const TestHookContext = () =&gt; {
    const context = useContext(Context)
  
    return (
      &lt;div&gt;
      &lt;button onClick={context.changeTextProp}&gt;
          Change Text
      &lt;/button&gt;
        &lt;p&gt;{context.stateProp}&lt;/p&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>And the tests:</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import TestHookContext from '../test_hook_context.js';
  import {render, fireEvent, cleanup} from '@testing-library/react';
  import App from '../../../App'
  
  import Context from '../../store/context';
  
  afterEach(cleanup)
  
  it('Context is updated by child component', () =&gt; {
  
     const { container, getByText } = render(&lt;App&gt;
                                              &lt;Context.Provider&gt;
                                               &lt;TestHookContext /&gt;
                                              &lt;/Context.Provider&gt;
                                             &lt;/App&gt;);
  
     console.log(container)
     expect(getByText(/Some/i).textContent).toBe(&quot;Some Text&quot;)
  
     fireEvent.click(getByText(&quot;Change Text&quot;))
  
     expect(getByText(/Some/i).textContent).toBe(&quot;Some Other Text&quot;)
  })
  </code></pre>