我是否应该测试 "wrapper layout" 组件是否将 props 传递给已经测试过的子组件？

Question

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

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

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

我的观点和问题：

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

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

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

非常感谢！

Answer 1

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

类别 - 道具
posts - 道具

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

1) 并进行一项测试以验证 post 是否正确渲染。

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

预期结果：然后如果类别没有渲染你就会知道问题到底在哪里。

Answer 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 传递给了它的 children。但是使用 react-testing-library 来做到这一点会让我简单地重复已经在两个 child 组件中定义的单元测试（它们被测试以正确渲染它们的道具）。所以 Enzyme 帮助我找到每个 child 组件的实例，并检查它们的 props 是否与传递给测试组件的相同。

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

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

我是否应该测试 "wrapper layout" 组件是否将 props 传递给已经测试过的子组件？

Should I test if a "wrapper layout" component passes props to children components that were already tested?

reactjs

unit-testing

integration-testing

react-testing-library