Jest:模拟几个导出组件中的一个

时间:2018-02-05 08:46:33

标签: reactjs mocking jest

在组件中我想测试我从父组件导入几个组件:

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

如何仅仅ResponsiveContainer嘲笑其他组件不受影响?

更新:在这种情况下,Dennie de Lange提示使用依赖注入。完全同意。但我遇到了以下问题。这是我的组成部分:

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>

Container的孩子因某种原因失踪了。有什么想法吗?

更新2:实际上上面的实现是正确的,LineChart在我的案例中没有任何内容。

1 个答案:

答案 0 :(得分:1)

通过在要测试的组件中进行配置?

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

这允许您创建模拟并将其提供给MyTestComponent