我是否应该测试“包装布局”组件是否将道具传递给已经测试过的子组件？答案

【问题标题】：Should I test if a "wrapper layout" component passes props to children components that were already tested?我是否应该测试“包装布局”组件是否将道具传递给已经测试过的子组件？
【发布时间】：2019-03-17 19:37:17
【问题描述】：

我正在构建一个博客页面，它有一个 Sidebar 和一个 Posts 组件，两者都经过单元测试，以检查它们是否呈现了 props 传递的正确数据（两者都是纯组件）。

我不得不创建一个名为BlogLayout 的包装器组件，因为我在某些时候重复了一些代码。 BlogLayout 接收帖子和类别作为 props，然后将它们传递给 Sidebar 和 Posts 组件，并使用一些样式渲染这两个组件。

问题是：我不知道应该如何测试BlogLayout 组件。它的全部目的是只将收到的道具传递给Sidebar 和Posts 组件（它将作为道具传递类别和帖子）。

我的观点和问题：

如果我测试 BlogLayout 是否呈现类别和帖子（作为 UI 数据），我只会重复在两个组件中进行的完全相同的测试。我还是应该这样做吗？
如果我考虑不测试它，因为它只是重复的代码，如果我不将这些道具传递给组件，我可能会遇到问题。它们将作为单元工作，但不会在应用程序中一起工作。
我对此的解决方案是对BlogLayout 进行单元测试，以仅检查它是否将正确的道具传递给子组件。这样我会有一个更简单的测试，因为知道 props 是传递下来的，我可以完全确定子组件会正确处理它，因为它们已经过测试。这可能吗？

我使用react-testing-library 进行测试。

非常感谢任何帮助我找到最佳解决方案的贡献，我远不是一个有经验的测试开发人员，所以我可能在这里对它们有一些错误的想法。

非常感谢！

【问题讨论】：

我应该这样做吗？ - 取决于方法。您应该进行功能测试。 这可能吗？ - 使用虚拟组件模拟子组件并断言他们接收道具并正确渲染。
@estus 这就是我的想法，但是嘲笑孩子们如何帮助他们知道他们是否收到了正确的道具？使用react-testing-library时，我只能根据元素进行断言，这意味着我会重复测试。所以也许我的主要问题是：在这种情况下使用react-testing-library 时首选的方法是什么？我在想，也许在这种情况下我不应该使用它，这样我就可以获得对子组件的引用，而不仅仅是 DOM 元素。
模拟组件，因此虚拟组件会将道具直接传递给 DOM，您可以使用选择器断言结果。由于 react-testing-library 非常倾向于功能测试，因此 WET 测试可能是首选，但这并不意味着您必须这样做。我个人不会。
我明白了，根据子组件的复杂性，它会变得更容易，但我仍然必须至少做一些映射来渲染数组道具，模拟事件以防万一传递 cb 函数，可能还有更多的情况，这只会让事情变得更加复杂。我想我会在这类测试中取消react-testing-library。感谢您的回答！

标签： reactjs unit-testing integration-testing react-testing-library

【解决方案1】：

关于您的第一点：例如，如果您有 2 个道具：

类别 - 道具
帖子 - 道具

您应该将两个道具都传递到包装器的声明中。

1) 并进行一项测试，以验证帖子是否正确呈现。

2)另一个检查类别是否正确呈现的测试。

预期结果：如果没有呈现类别，您将确切知道问题出在哪里。

【讨论】：

我已经用更多信息更新了我帖子的开头。我在包装器组件中接收帖子和类别作为道具。如果我在包装器组件中测试帖子（带有标题、图像等的文章列表）和侧边栏（带有文本和 href 的类别列表）是否正确呈现，我将重复与我完全相同的测试那些组件。这就是为什么我认为只测试包装器组件是否将接收到的道具传递给它的孩子会更有意义，但我不确定这是否可能或者我应该使用 react-testing-library 采用哪种其他方式。

【解决方案2】：

我最终使用 Enzyme 来检查 props 是否被传递给组件，所以最终测试是这样结束的：

it(`passes down the correct props to child components`, () => {
  const wrapper = shallow(<BlogLayout {...props} />);
  expect(wrapper.find(Sidebar).props().categories).toMatchObject(props.categories);
  expect(wrapper.find(Sidebar).props().currentCategory).toMatchObject(props.currentCategory);
});

我认为测试这个组件的最佳方法是检查是否将正确的 props 传递给它的子组件。但是要使用react-testing-library 来做到这一点，我只需重复已经在两个子组件中定义的单元测试（它们经过测试以正确呈现它们的道具）。所以 Enzyme 帮助我找到每个子组件的实例，并检查它们的 props 是否与传递给测试组件的相同。

这样我就不会在不同的测试中重复自己，并且仍然有信心我的应用按预期工作。

如果有人对此或更好的解决方案有更多想法，如果我发现它实际上更好，我将非常乐意尝试并更新正确答案。

【讨论】：