Testing: Why mock axios when I can just pass whatever props I want? (react-testing-library/jest)

[EdenSweden]

Hello! I have been learning react-testing-library and jest, and I am using them to test a react application. In my application, one of the uppermost parent components makes an axios call to an API within a useEffect hook, and changes the state (useState) once receiving it. What is displayed in almost all of the child components depends upon the data received from that API and passed down as props. But learning how to mock axios, especially with the added complexity of multiple hooks in multiple components, has been a major headache-inducer for me.

I understand needing to mock axios in the case of testing my get request in and of itself and checking that the parent uses the data properly, but otherwise, should I be doing that for the child components? Is there some reason why I should not be just hard-coding the props in my tests since I know what they will be ahead of time?

For example:
ChildComponent.test.js

import ChildComponent from '../ChildComponent';
import { render, screen } from '@testing-library/react';

it('renders proper info according to props received from api data from parent', () => {
render(<ChildComponent exampleProp={somethingIHardCodedBasedOnAPIData}/>);
const itemToLookFor = screen.getByText(/text to search for/i);
expect(itemToLookFor).toBeInTheDocument();
})

Is there a reason why this would be bad practice? Is it necessary to mock an axios call within the child component test files? Or will all my problems go away if I figure out how to successfully mock axios in the parent, import the parent in the test file, and then:

render (<Parent><ChildComponent/></Parent>)

I am so confused.

[colinthornton]

If the subject of the test is ChildComponent, and ChildComponent is a pure component that only depends on its props, then I think you’re on the right track by not rendering the Parent component.

For each prop you could hard code the value, and check that it renders properly for that specific prop.

So for a title prop you would hard code the string value, render the component, and check that the passed title string is what’s found in the DOM.

[colinthornton]

On the other hand, if the subject of test is the Parent component, and Parent depends on the side effects created by axios, then mocking axios would be one option to making it testable (maybe the only way if you aren’t the one writing the server API).

[EdenSweden]

Thank you for the explanation. I think I understand testing and pure components a lot better now.