1

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

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

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

我对这种情况的观点和问题：

  • 如果我测试是否BlogLayout呈现类别和帖子（作为 UI 数据），我只会重复我在两个组件中进行的完全相同的测试。无论如何我应该这样做吗？

  • 如果我考虑不测试它，因为它只是重复的代码，如果我不将这些道具传递给组件，我可能会遇到问题。它们将作为单元工作，但不会在应用程序中一起工作。

  • 我对此的解决方案是进行单元测试BlogLayout以仅检查它是否将正确的道具传递给子组件。这样我会有一个更简单的测试，因为知道 props 是传递下来的，我可以完全确定子组件会正确处理它，因为它们已经过测试。那可能吗？

我正在react-testing-library用于测试。

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

非常感谢！

4

2 回答 2

0

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

  • 类别 - 道具
  • 帖子 - 道具

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

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

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

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

于 2019-03-17T20:12:27.997 回答
0

我最终使用 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);
});

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

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

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

于 2019-03-17T23:04:19.230 回答