# Problem

Unit testing with `useGetFetch` requires mounting to fully test effects, which sucks if you're doing something with connected components downstream. But if you consider the custom hook is well tested, you can also ignore it. I've found a few patterns that allow unit testing the rendering or click handlers while ignoring the bulk of the logic for `useGetFetch` and avoiding the use of mount.

To start, a typical component that uses `useGetFetch` probably looks like the following:

```js
export function Component({ match }) {
  const [data, loading] = useGetFetch(`/api/v1/careplan?=subject=${match.params.clientId}`);

  // Handle initial/loading states
  if (!data || loading) {
    return <LoadingIndicator />;
  }

  // Verify data, e.g., from a FHIR endpoint
  if (!Array.isArray(data.entry) {
    return <ErrorWidget />;
  }

  // At this point, all children components can be sure the data is valid.
  return <AdvancedSearch { ...props } />;
}
```

To test this, you'd have to use stub the fetch, now easily done with FetchContext.

```js
import { expect } from 'chai';
import sinon from 'sinon';
import { mount } from 'enzyme';

import { Component } from './Component';
import { FetchContext } from './useFetch';

describe('Component', () => {
  let fetch;
  beforeEach(() => {
    fetch = sinon.stub();
  })
  it('renders a loading indicator initially', () => {
    const wrapper = mount(
      <FetchContext.Provider value={ fetch }>
        <Component match={ { params: { clientId: 'foo' } } } />
      </FetchContext.Provider>
    );
    expect(wrapper.find(LoadingIndicator)).to.have.length(1);
  });
  it('renders an error widget if fetching returns an invalid shape', async () => {
    fetch.resolves({ message: 'error' });
    const wrapper = mount(
      <FetchContext.Provider value={ fetch }>
        <Component match={ { params: { clientId: 'foo' } } } />
      </FetchContext.Provider>
    );
    await 0;
    wrapper.update();
    expect(wrapper.find(ErrorWidget)).to.have.length(1);
  });
  it('renders AdvancedSearch with the data', async () => {
    fetch.resolves({ entry: [] });
    // Uh-oh, this will throw because AdvancedSearch is connected to the store.
    const wrapper = mount(
      <FetchContext.Provider value={ fetch }>
        <Component match={ { params: { clientId: 'foo' } } } />
      </FetchContext.Provider>
    );
    await 0;
    wrapper.update();
    expect(wrapper.find(AdvancedSearch)).to.have.length(1);
  });
});
```

However, when mounting, components wrapped in the connect HOC will throw an error to wrap your components in a `<Provider />`.

# Solution

To fix/work around this, you can use test props to bypass certain conditionals, regardless of the actual result of `useGetFetch`, since you can be sure it will handle loading and errors correctly. *(Unfortunately, we can't provide test data to `useGetFetch` to return because the Context API only works when mounted.)

```js
export function Component({
  match,
  __TEST_DATA__ // <- test prop
}) {
  const [dataFromFetch, loading] = useGetFetch(`/api/v1/careplan?=subject=${match.params.clientId}`);
  const data = __TEST_DATA__ || dataFromFetch;

  // If there is no test data, proceed with the usual rendering logic.
  if (!data || loading) {
    return <LoadingIndicator />;
  }

  // You can also verify the __TEST_DATA__ with shallow rendering as well.
  if (!Array.isArray(data.entry) {
    return <ErrorWidget />;
  }

  // Finally, since we've reached this point with __TEST_DATA__ without depending on useEffect,
  // you can use shallow rendering to test this.
  return <AdvancedSearch { ...props } data={ data.entry } />;
}
```

So, to test this, you can use shallow rendering:

```js
import { expect } from 'chai';
import { shallow } from 'enzyme';

import { Component } from './Component';

describe('Component', () => {
  it('renders AdvancedSearch with the data', () => {
    // Yay, this works!
    const wrapper = shallow(
      <Component
        match={ { params: { clientId: 'foo' } } }
        __TEST_DATA__={ { entry: [] } } />
    );
    expect(wrapper.find(AdvancedSearch).props().data).to.eql([]);
  });
});
```

And there you have it! A way to shallow render and test components using `useGetFetch`.

# TL;DR

For legacy components still using Redux, using mount to test loading/error states is still easy enough. But when getting into the bulk of the render logic, it might be infeasible to mount, so you can use test props to bypass certain conditionals.

For new components with children that don't depend on Redux, it's fairly easy to just use mount. However, you can still use the same patterns as above to avoid rendering deep sub-trees.