Uncovered lines not shown for conditions in jsx

[Samuel_Esposito]

• Version used: Sonarcloud
• Error observed: No red mark for missing coverage on conditions in React JSX
• Steps to reproduce: Add a javascript file containing JSX with a condition (e.g. {someCondition && (<div>test</div>)})
• Potential workaround: Show red mark for uncovered line numbers in lcov report.

[Yassin (Yassin Kammoun)]

Hello Samuel,

Thank you for your message.

Unfortunately, I was not able to reproduce the problem you are facing. Analysing a JavaScript file just containing the code snippet you provided does show red mark for uncovered line numbers.

I suspect a parsing failure, but I would need the full logs to confirm it. Also, would it be possible to share a small reproducer that actually highlights missing red marks for that code pattern?

Yassin

[Samuel_Esposito]

Hi Yassin,

Thanks for getting back to me. Below you’ll find a simple example that shows the coverage problem:

This is a simple React component with a condition in the JSX:

import React from 'react'

const Test = ({ condition }) => (
  <div>
    {condition && <span>Test1</span>}

    <span>Test2</span>
  </div>
)

export default Test

This is a test that does not cover the JSX condition:

import React from 'react'
import { shallow } from 'enzyme'

import Test from './Test'

describe('Test', () => {
  it('renders the message Test2', () => {
    const component = shallow(<Test />)

    expect(component).toMatchSnapshot()
  })
})

When I run the test with coverage locally, the uncovered line is in the output:

In SonarCloud I get the message that one condition is uncovered:

In the code overview the uncovered line is not shown however:

Especially in larger components, this makes it hard to find uncovered lines.

[Yassin (Yassin Kammoun)]

Hello Samuel,

Thank you for the reproducer. It was very helpful as I managed not only to reproduce the problem but also to identify its cause.

SonarQube relies on the concept of executable lines to calculate missing test coverage. It turns out that SonarJS doesn’t take into account logical expressions in the set of executable lines, which it should. In that regard, I created a ticket that will be addressed soon.

I will come back to you once this is fixed.

[Samuel_Esposito]

Any update on this?

[Yassin (Yassin Kammoun)]

Sorry for the delay. The root cause turned out to be quite different from what I expected. Something might be wrong with the scanner when processing the lcov.info file. Therefore, it requires further investigation. I will report your problem further up.

[felipeplets]

Hi @Yassin is there any update or issue tracking this bug?

I feel like this is not JSX related but how SonarQube interprets and display the conditions in the viewer as I have this in similar conditions in other places of the code.

[Yassin (Yassin Kammoun)]

Hello there,

The investigation took quite some time, but it is finally over. We identified the root cause, and we’ve already implemented a fix. It will be part of the upcoming SonarQube 8.9 LTS release.

It’s a bit technical, but for those of you who are curious and want to fully understand what’s actually happening, I invite you to have a look at the description of this ticket.

Long story short, it was indeed a problem about executable lines. And as pointed out by @felipeplets (welcome to SonarSource community!), it was not limited to conditions in JSX constructs.

Best,
Yassin

[felipeplets]

Thanks Yassin! I know SonarQube 8.9 will be released on May 4th. When can we expect SonarCloud to adopt it?

[Yassin (Yassin Kammoun)]

You can expect SonarCloud to adopt it this week. I can notify you once this is the case.

[Yassin (Yassin Kammoun)]

It’s finally on SonarCloud!

Cheers,
Yassin