模拟渲染道具React Component with Jest

Question

嗨，我正在尝试模拟以下React组件：

<Component content={data || {}}>
{() => <ChildComponent/>}
</Component>

我在mocks中编写了以下mock

import React from 'react';
const ComponentToMock = () => <div>A mock</div>;
export default ComponentToMock;

现在在我的测试文件中，我写了

jest.mock('presentational/Component');
it(`should render`, () => {
let wrapper = shallow(<Component {...props} />);
console.log(wrapper.debug());
});

在控制台上我得到

<ComponentToMock content={1}>
<undefined />
</ComponentToMock>

而我只期待

<div>A mock</div>

有人能帮我找出我做错了什么吗？感谢

Answer 1

我实际上发现使用mount而不是浅层调用渲染方法，所以在我的mock中我写道：

const ComponentMock = props => {
return props.content ? props.children() : null;
};
export default ComponentMock;`