React - 测试 NavBar 组件的建议

Question

我是一名试图了解 React 组件测试的新用户。我在 Typescript 环境中使用 Enzyme 和 Jest。

我正在尝试测试的组件之一是 NavBar 组件，它使用 material-ui 按钮实现。

const NavBarLinks = (): JSX.Element => (
  <>
    <Button
      color="inherit"
      component={NavLink}
      activeClassName={navbar.highlighted}
      to="/about"
    >
      About
    </Button>
    <Button
      activeClassName={navbar.highlighted}
      color="inherit"
      component={NavLink}
      to="/courses"
    >
      Courses
    </Button>
    <Button
      activeClassName={navbar.highlighted}
      color="inherit"
      component={NavLink}
      exact={true}
      to="/"
    >
      Home
    </Button>
  </>
);

我编写了一个快照测试来测试组件是否呈现具有预期链接和属性等的按钮。

是否还需要测试导航栏组件在单击按钮时是否更改了路线？我已经开始为此功能编写测试here。

是不是认为react-router提供的NavLink组件已经对这个功能进行了测试。以后，导航栏上的每条路由变化就不用写测试了吗？

Answer 1

这是一个很好的问题，归结为测试哲学。测试有多种类型：单元测试、端到端测试等。

如果您正在测试一个组件，那么您就是在对其进行单元测试。基本上，您正在测试它是否在某种程度上孤立地表现出应有的行为。为此，快照测试很好，您可以通过测试它具有的特定值来加倍努力，例如每个 Button 具有的url。

[React 测试库[(https://github.com/testing-library/react-testing-library) 让这变得非常简单，我实际上建议使用它与 Enzyme。

如果您想测试导航栏是否呈现了它应该呈现的内容，它会变成end to end test。