How to mock a custom hook inside of a React component you want to test? : <p>If you have a React component that calls a custom hook that fetches data, what is the best way to mock that internal custom hook result when testing the React component? I see 2 main approaches:</p>

<p>1) Jest.mock the custom hook. This seems to be the most recommended approach, but it seems like it requires the test to have more knowledge of internal implementation details and what it might need to mock than what the props interface of the component might suggest (assuming use of prop-types or TypeScript)</p>

<p>2) Use a dependency injection approach. Declare the hook as a prop, but default it to the real hook so you don't have to set it everywhere you render the component, but allow overriding with a mock for tests. Here is a contrived codesandbox example with a test that mocks a custom hook:</p>

<p><a href="https://codesandbox.io/s/dependency-inject-custom-hook-for-testing-mjqlf?fontsize=14&amp;module=%2Fsrc%2FApp.js" rel="noreferrer">https://codesandbox.io/s/dependency-inject-custom-hook-for-testing-mjqlf?fontsize=14&amp;module=%2Fsrc%2FApp.js</a></p>

<p>2 requires more typing, but seems easier to work with for testing. However, tests already have to have knowledge of internal implementation details of component to test any conditional logic for rendered output, so maybe that's not important and 1 is the best approach. Is 1 the way to go? What tradeoffs do you see? Am I missing another approach altogether?</p>
