如何在不模拟 useRef() 的情况下测试 useRef()？

如何在不模拟 useRef() 的情况下测试 useRef()？

有时你需要将一些 React 组件的方法暴露给它的父组件 使用命令句柄（） 和 前向引用（） .在之前的一篇文章中，我写了关于测试这些公开方法的文章。这次我们来看看父组件。我们如何测试父组件是否真的调用了子组件的方法？

在一个简单的情况下，您可以模拟 使用参考（） 并完成它：

test("应该调用子组件的方法", () => { 常量 mockChildMethod = jest.fn (); 是
.spyOn（反应，'useRef'）
.mockReturnValue({
当前的： {
childMethod：模拟ChildMethod
}
}); ...做一些触发子方法的事情... 期望(mockChildMethod).toBeCalled(); });

但是，如果不仅子组件公开方法，而且父组件也公开方法怎么办？在这种情况下，嘲笑 使用参考 导致并发症。

在我的现实生活任务中，我正在测试一个名为 页 它为导入它的任何组件提供了一系列 UI 功能：对话框、快餐栏、微调器等。显示这些元素的方法暴露给父组件 使用命令句柄（） .它的子组件，例如 对话 , 微调器 和 小吃店 也有类似暴露的方法。我的 页 组件看起来像这样：

const Page = forwardRef((props, ref) => { 常量对话框 = useRef(); useImperativeHandle(ref, () => ({ 显示对话框（配置）{
dialog.current.show(config);
} 隐藏对话（）{
dialog.current.hide();
}
}); 使成为（

);
});

从测试的角度来看，它提出了一个问题。在我的测试中，我正在渲染 页 像这样：

const ref = React.createRef();
使成为（ ); ref.current.showDialog();

测试子组件是否 显示对话框（） 方法被调用，我应该模拟出来 反应.useRef() 就像第一个例子一样。但是，如果我这样做了， 参考电流 将不再代表 页 并用我创建的模拟替换它们，模仿的方法 对话 .这将使测试的方法 页 不可能的。

如何模拟 对话 但不是 页 ?为此，需要在 页 .参考资料 对话 应该暴露在 使用命令式句柄 钩。最好使用吸气剂来完成。

const Page = forwardRef((props, ref) => { 常量对话框 = useRef(); useImperativeHandle(ref, () => ({

获取 dialogRef() {
返回对话框.当前；
} 显示对话框（配置）{
dialog.current.show(config);
} 隐藏对话（）{
dialog.current.hide();
}
}); 使成为（

);
});

现在我们可以模拟出对 对话 并监视方法：

test("应该打开和关闭一个对话框", () => { const ref = React.createRef();
使成为（ ); const show = jest.spyOn(ref.current.dialogRef, 'show');
const hide = jest.spyOn(ref.current.dialogRef, 'hide'); 行动（（）=> {
ref.current.showDialog();
ref.current.hideDialog();
}); 期望（显示）.toBeCalled（）；
期望（隐藏）.toBeCalled（）；
});

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/38660/31242211