在我的功能组件中反应测试 3rd 方组件答案

【问题标题】：React testing 3rd party component inside my functional component在我的功能组件中反应测试 3rd 方组件
【发布时间】：2020-12-15 00:06:47
【问题描述】：

如何在我的组件中测试第 3 方组件？所有的处理程序都在我的功能组件中。

我正在使用玩笑和酶。

例子：

export const Index = () => {
   <CompA onClick /> // this is tested
   <3rdPartyComp onClose onFinish initialValues ... /> // how to test this?
}

点击时以模态打开第 3 方组件，反之，第 3 方组件 onClose 需要关闭它。

如何模拟第 3 方组件？或者我设置道具并模拟点击我设置的那些道具的其他方式。

到目前为止我尝试过的最小代码：

如果第 3 方组件如下所示：

<Comp onClose onFinish ... />

然后在开玩笑的跑步者中，我正在这样做：

const onClose = expect(wrapper.find(SomeComp).prop('onClose'));
if (onClose) {
   onClose(() => false);
}
expect(...);

这很有效，即使我不确定是否是最好的方法

兄弟，

【问题讨论】：

为什么要测试第三方组件？这是图书馆本身的工作。你通常只是测试你自己的代码
这是应用程序大部分引导代码的向导，我需要使用那些“可重用”组件。所以我喜欢模拟关闭向导，仅此而已。向导中的每一步都会加载其他组件，我将单独测试。
您是如何尝试与测试中的第三方组件交互的？您如何在测试中提供模拟处理程序？您如何测试处理程序是否已被调用？
@AlexanderStaroselsky 这就是问题所在，我喜欢为模拟组件提供模拟道具。
不要测试第 3 方代码，您应该期望它在使用它时已经经过充分的单元测试。单元测试你的代码。还是您的问题更多是关于模拟它以便您可以测试Index 组件？你试过什么？

【解决方案1】：

您无需测试第 3 方组件和代码。测试责任属于 3rd 方库。如果 3rd 方库没有任何测试，不建议使用。您应该使用经过充分测试的 3rd 方库。

对于您的示例，您应该测试组件的代码逻辑和行为。

请提供mvce，以便我们知道如何测试。

【讨论】：

我使用的一种方法是这样的： const onClose = expect(wrapper.find(SomeComp).prop('onClose')); onClose(() => false);这样我提取道具并调用 fn 我不确定是否是最好的解决方案....另外问题是我的组件中的处理程序实际上是 useCallback 的...它内部调用 setState 和触发器真/假标志