Unit Testing and Cyclomatic Complexity

3

There’s probably a better word for it. I mean the component parts of a unit that require testing. In my case, the unit is a React component, and the subunits are the conditional JSX elements it renders.

This is a simplified version:

const Sidebar = (props) => {

  const { user = {} } = props;

  //render

  return (
    <div>
      <p>{`Hi, ${user.name || "Anonymous"}!`}</p>
      <hr />
      <button>{user.auth ? "Logout" : "Login"}</button>
    </div>
  );

};

If defined, user has the following (simplified) schema:

{
  name: "",
  auth: {
    provider: "",
    id: ""
  }
}

I can think of four ways to test this:

  1. Test the default case and the case where user.name and user.auth are defined. This covers all branches and both common scenarios.
  2. Additionally test the case where only user.auth is defined. This covers all scenarios.
  3. Additionally test the case where only user.name is defined. This covers all paths.
  4. Test the p and button elements as separate components. This has the side benefit of greater reusability.