小编Sha*_*uch的帖子

我有一个 React 函数组件，它在它的一个子组件上有一个引用。ref 是通过useRef.

我想用浅渲染器测试组件。我必须以某种方式模拟 ref 来测试其余的功能。

我似乎找不到任何方法来获得这个 ref 并嘲笑它。我尝试过的事情

• 通过 childs 属性访问它。React 不喜欢那样，因为 ref 并不是真正的道具

• 模拟 useRef. 我尝试了多种方法，但只有在我的实现使用时才能让它与间谍一起工作React.useRef

我看不到任何其他方式可以让裁判嘲笑它。在这种情况下我必须使用 mount 吗？

我无法发布真实场景，但我构建了一个小示例

it('should test', () => {
    const mock = jest.fn();
    const component = shallow(<Comp onHandle={mock}/>);


    // @ts-ignore
    component.find('button').invoke('onClick')();

    expect(mock).toHaveBeenCalled();
});

const Comp = ({onHandle}: any) => {
    const ref = useRef(null);

    const handleClick = () => {
        if (!ref.current) return;

        onHandle();
    };

    return (<button ref={ref} onClick={handleClick}>test</button>);
};