React-测试NavBar组件的建议

Question

我是一个新用户，试图了解React组件的测试。我在Typescript环境中使用带有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

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

如果要测试component

，则是对其进行单元测试。基本上，您正在测试它在某种程度上是应该隔离的。为此，快照测试是不错的选择，您可以通过测试其具有的特定值（例如每个Button的url）来加倍。

[反应测试库[[https://github.com/testing-library/react-testing-library）使此操作非常容易，我实际上建议将其与酶一起使用。

如果您要测试导航栏是否渲染了应该渲染的内容，它将变成end to end test。