开玩笑地测试 React 组件的 child 是否实际上是提供的 child

Question

我有一个 react "wrapper" 组件应该包裹它的 child。这是相关部分：

export class Wrapper extends Component {   
    render(){
        return (<div>{ this.props.children }</div>);
    }
}

我正在尝试使用 jest 来测试呈现的 child 是否确实是提供给此包装器的内容。这是我尝试过的；

describe('SwapWrapper', () => {
    it('contains its child', () => {
        const potentialChild = (<AMockedComponent/>);
        const wrapper = TestUtils.renderIntoDocument(
            <Wrapper>{potentialChild}</Wrapper>
        );
        const realChild = TestUtils.findRenderedComponentWithType(wrapper, AMockedComponent);
        expect(realChild).toBe(potentialChild); // Obviously does not work.
    });
});

显然不行。 realChild is a component instance while potentialChild is a component element.

目前，我唯一能做的就是用属性创建 potentialChild 并检查 realChild 是否包含这个属性。

是否有更有效的方法来检查 realChild 是否实际上对应于已提供的 potentialChild？

Answer 1

我找到了使用 ref 的解决方案。 react元素的ref属性会在实例化时随创建的实例回调

describe('SwapWrapper', () => {
    it('contains its child', () => {
        const ref = jest.fn();
        const potentialChild = (<AMockedComponent ref={ref}/>);
        const wrapper = TestUtils.renderIntoDocument(
            <Wrapper>{potentialChild}</Wrapper>
        );
        const realChild = TestUtils.findRenderedComponentWithType(wrapper, AMockedComponent);
        expect(ref).toBeCalledWith(realChild);
    });
});

开玩笑地测试 React 组件的 child 是否实际上是提供的 child

Test if a react component's child is in fact the provided child with jest

javascript

reactjs

jestjs