jeudi 2 janvier 2020

React - Advice for testing a NavBar Component

I am a new user trying to understand testing of React components. I am using Enzyme with Jest in a Typescript environment.

One of the components that I am trying to test is a NavBar component, implemented using material-ui buttons.

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

I have written a snapshot test to test that the component renders buttons with expected links and properties etc.

Is there a need to also test that the navbar component changes the route when a button has been clicked? I have started writing a test for this functionality here.

Is it the view that the NavLink component provided by react-router already has tests for this functionality. Subsequently, it is unnecessary to write tests for changing each route on the navbar?

Aucun commentaire:

Enregistrer un commentaire