Calculating Cyclomatic complexity in reactjs code

Must-share information (formatted with Markdown):

  • which versions are you using (SonarQube, Scanner, Plugin, and any relevant extension)
    SonarQube v9.8.0.63668
  • what are you trying to achieve
    Run sonarQube and measure cylomatic complexity
  • what have you tried so far to achieve this
    We are able to setup SonarQube on a reactjs + typescript project
    However we are not able to see proper cylomatic complexity values. In most part of the code we see below message “Not covered by tests”.

Is this is a problem in how we have setup sonarQube or is this a limitation of the tool

Hey there.

At a project and file-level, you can find details about Complexity in your project-level Measures > Complexity

You can also include rules like Cyclomatic Complexity of functions should not be too high in your Quality Profile so that an issue is raised if a specific function crosses the acceptable threshold.

Hi Colin,

Thanks for the response.

We can see the cyclomatic complexity of the app and for an individual file from the menu option you mentioned. However when we open the file, we donot see which part of the code has increased the complexity. All we see are messages saying “Not covered by tests” like the screenshot seen below

So we are unable to find which part of the code has increased the code complexity which we need to optimize.

@colin
Any thoughts on this?

Hey there.

Sorry, this got lost in the holiday shuffle.

I wouldn’t pay any attention to Not covered by tests. in the context of Cognitive Complexity. This is just telling you whether or not test coverage has been reported on the line or not. It has nothing to do with complexity.

It’s true that SonarQube won’t show you specifically what part of the code increased the file’s complexity overall, and as mentioned earlier, you can enable rules like Cyclomatic Complexity of functions should not be too high so that specific functions are flagged when they cross a threshold. When issues are raised by this rule, the code will be highlighted to show how complexity was calculated (which lines are adding more complexity, for example).