在组件中我想测试我从父组件导入几个组件:
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
在我的案例中没有任何内容。
答案 0 :(得分:1)
通过在要测试的组件中进行配置?
const MyTestComponent = ({container:Container=ResponsiveContainer}) => ...
这允许您创建模拟并将其提供给MyTestComponent