title: How test a component using the useReducer hook?
body: <h1>Reducer</h1>
  <pre class="lang-js prettyprint-override"><code>// src/reducers/FooReducer.js
  
  export function FooReducer(state, action) {
    switch (action.type) {
      case 'update': {
        return action.newState;
      }
  // ... other actions
      default:
        throw new Error('Unknown action type');
    }
  }
  
  </code></pre>
  <h1>Component</h1>
  <pre class="lang-js prettyprint-override"><code>// src/components/BarComponent.js
  
  export function BarComponent() {
    const [state, dispatch] = useReducer(FooReducer, []);
  
    return (
      {state.map((item) =&gt; (&lt;div /&gt;))}
    );
  }
  </code></pre>
  <h1>Test</h1>
  <pre class="lang-js prettyprint-override"><code>// src/components/BarComponent.test.js
  
  it('should render as many divs as there are items', () =&gt; {
    act(() =&gt; {
      const { result } = renderHook(() =&gt; useReducer(FooReducer, [1]));
      const [, dispatch] = result.current;
      wrapper = mount(&lt;BarComponent /&gt;);
      dispatch({type: 'update', newState: [1, 2, 3]});
    });
  
    expect(wrapper.find(div)).toHaveLength(3);
  });
  </code></pre>
  <p>The above test example does not work, but serves to demonstrate what I am trying to achieve. and would actually render 0 div, as the initial state declared in the component contains 0 items.</p>
  <ol>
  <li><p>How would I go about modifying a reducer's state or changing the initialState it is deployed with for testing purposes?</p>
  </li>
  <li><p>I am used to Redux reducers being used throughout multiple components, but useReducer needs a passed initialState... which raises the question: Is react-hook's reducer usable through multiple components as a single instance or will it always be 2 separate instances?</p>
  </li>
  </ol>