What is the best way to mock React child components with Jest? - reactjs

Question

I want to write a test to mock a child component in a React component hierarchy using Jest. One of Jests main features is mocking functions to reduce test complexity but I cant find a straightforward way to mock child components. I can mock a parent component imported from a module OK the problem I have is mocking a child. Sorry I cant provide a codesandbox or similar as there are a few outstanding issues between csb and jest integration. Other thing to note is that I am using react testing library for rendering and assertions.
A very simple component hierarchy:
// ./features/test-samples/tree.js
export const Child = () => {
return (
<h1>Child</h1>
)
}
export const Tree = () => {
return (<>
<h1>Tree</h1>
<Child/>
</>)
}
Both of the following tests succeed.
// tree.test.js
import { render as rtlRender } from '#testing-library/react';
import { Tree } from './features/test-samples/tree';
describe.only('Test <Tree/> component', () => {
// test success
test("test entire render tree", () => {
const { getByText } = rtlRender(<Tree />);
expect(getByText(/Tree/i)).toBeInTheDocument();
expect(getByText(/Child/i)).toBeInTheDocument();
});
// test success
test("test mocked parent", () => {
jest.doMock('./features/test-samples/tree', () => {
return {
Tree: jest.fn(() => <div>Mocked Tree</div>),
}
});
const { Tree } = require('./features/test-samples/tree');
const { getByText } = rtlRender(<Tree />);
expect(getByText(/Mocked Tree/i)).toBeInTheDocument();
});
})
This doesnt work. How can I write jest test to render parent (Tree) and mock child?
import { render as rtlRender } from '#testing-library/react';
import { Tree } from './features/test-samples/tree';
...
test("test mock child", () => {
const actualModule = jest.requireActual('./features/test-samples/tree');
jest.doMock('./features/test-samples/tree', () => {
return {
...actualModule,
Child: jest.fn(() => <div>Mocked Child</div>),
}
});
const { Tree } = require('./features/test-samples/tree');
const { getByText } = rtlRender(<Tree />);
expect(getByText(/Mocked Child/i)).toBeInTheDocument();
});
error:
Test <Tree/> › test mock child
mockConstructor(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
106 | });
107 | const { Tree } = require('./features/test-samples/tree');
> 108 | const { getByText } = rtlRender(<Tree />);
| ^
109 | expect(getByText(/Child/i)).toBeInTheDocument();
110 | });
111 | })
Any advice is much appreciated.