Jest: mock one of several exported components - reactjs

Question

In component I want to test I import several components from a parent component:
import {
ResponsiveContainer,
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Legend,
} from 'recharts';
How do I mock just ResponsiveContainer leaving other components untouched?
Update: Dennie de Lange prompted to use dependency injection in this case. Completely agree. But I faced the following problem. Here is my component:
import React, { Component } from 'react';
import {
ResponsiveContainer,
LineChart,
} from 'recharts';
import moment from 'moment';
class CustomLineChart extends Component<Props> {
render() {
const { data, container: Container = ResponsiveContainer } = this.props;
if (!data) return null;
return (
<div className="lineChart">
<Container>
<LineChart data={data}>
... lots of other stuff here
</LineChart>
</Container>
</div>
);
}
}
export default CustomLineChart;
and here's my test:
const Mock = ({ children }) => <div>{children}</div>;
describe('<LineChart />', () => {
it('renders data if provided', () => {
const component = create(<LineChart data={data} container={Mock} />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
});
And here's what snapshot I get for this:
<div
className="lineChart"
>
<div />
</div>
So children of Container are missing for some reason. Any ideas?
Update 2: Actually the above implementation is correct, this was LineChart rendering nothing in my case.

Answer 1

By making it configurable in the component you want to test?
const MyTestComponent = ({container:Container=ResponsiveContainer}) => ...
This allows you to create a mock and supply it to the MyTestComponent