Reactjs 笑话：模拟几个导出组件之一

在我要测试的组件中，我从父组件导入多个组件：

import {
  ResponsiveContainer,
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Legend,
} from 'recharts';

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;

我如何模拟just ResponsiveContainer，让其他组件保持不变

更新：Dennie de Lange在本例中被提示使用依赖注入。完全同意。但我面临以下问题。以下是我的组件：

import {
  ResponsiveContainer,
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Legend,
} from 'recharts';

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;

这是我的测试：

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();
  });
});

下面是我得到的快照：

<div
  className="lineChart"
>
  <div />
</div>

所以集装箱的孩子们不知什么原因失踪了。有什么想法吗

---

更新2：实际上上面的实现是正确的，在我的例子中，这是线图没有呈现任何内容。

通过在要测试的组件中配置它

const MyTestComponent = ({container:Container=ResponsiveContainer}) => ...

---

这允许您创建一个mock并将其提供给MyTestComponent

我非常有兴趣找到一种用jest来模拟它的方法，但忘记了依赖项注入：谢谢提醒。但我还是做不到。我已经尝试了您的解决方案，并提供了const Mock={children}=>{children}；到容器道具，但我得到的只是快照。有什么想法吗？这可能取决于组件，不能不看更多的实现我已经添加了实现细节。您是否尝试附加一个简单的子项并查看结果？看起来线条图没有渲染。。所以试一下，测试一下