reactjs - 测试渲染 Prop 组件

Question

如果我有一个像这样的渲染 Prop 组件:

export class ParentComponent extends React.Component {
    render() {
        <Loader loading={false}>
                {() =>
                    <SomeChildComponent />
               }
    }
}

如何对其进行单元测试？

test('should output child component',  => {
    const wrapper = shallow(<ParentComponent />);
    expect(wrapper.find(SomeChildComponent).length).to.be(1);
}

失败 - 如果我测试 Loader 组件 - 测试通过:

  expect(wrapper.find(Loader).length).to.be(1);

如何测试 SomeChildComponent 是否已输出？

Answer 1

你的内在功能() =><SomeChildComponent />从未执行过，所以你的测试说明了事实 SomeChildComponent不存在。您只需要调用它(注意额外的括号):

export class ParentComponent extends React.Component {
    render() {
        return (<Loader loading={false}>
            { (() =><SomeChildComponent />)()}
        </Loader>);
    }
}

我们可以将其重构为更多render-props方式:

export class ParentComponent extends React.Component {
    render() {
        return (<Loader loading={false}>
            { this.props.render()}
        </Loader>);
    }
}

然后相应地更改测试:

const render = () => <SomeChildComponent />;
const wrapper = shallow(
    <ParentComponent render={render} />
);

但是，这个测试并不是真正的 unit测试，因为它一次测试多个组件。为了摆脱这种依赖性，我们只需检查是否 render()称为:

const renderMock = jest.fn();
const wrapper = shallow(<ParentComponent render={ renderMock } />);
expect(wrapper.find('Loader').exists()).toBeTruthy();
expect(renderMock).toHaveBeenCalled();

如果您的render()接受一些参数，您可以考虑使用 .toHaveBeenCalledWith