Question

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

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

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

我对情况的观点和疑问：

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

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

为帮助我获得最佳解决方案所做的任何贡献都受到赞赏，我远不是一名经验丰富的测试开发人员，因此在这里我可能对它们有一些错误的想法。

非常感谢！

Answer 1

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

类别-属性
帖子-道具

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

1）并进行一项测试，以验证发布是否正确呈现。

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

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

Answer 2

I ended up using Enzyme to check if the props were being passed down to the components, so the final test ended up like this:

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);
});

I imagined that the best way to test this component is to just check if the correct props are being passed to its children. But to do this using react-testing-library would make me simply just repeat the unit tests already defined in both child components (they are tested to render their props properly). So Enzyme helps me to find the instance of each child component and just check if their props are the same as the one passed to the tested component.

This way I don't repeat myself in different tests, and still have the confidence that my app is working as intended.

If someone has any more thoughts on this or a better solution, I would be extremely happy to try and update the correct answer if I find it to be actually better.

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

2 个答案: