Why is Jest marking CSS as untested (and not marking untested functions)?

Question

I'm using jest in a vue3 project to write tests. However, for some reason, jest is marking the css in several of the sfcs as untested when of course it doesn't need to be tested.

Further, it's selection of what has been tested, what hasn't been and what doesn't need to be seems very random.

Some examples:

This is part of the jest html report for one of the sfcs. Note it says showTooltip has been tested but seemingly inexplicably says the variables below it have not (none are included or manipulated in any written tests). It says isValidRoute hasn't been tested (but for some reason doesn't need to be) whereas it actually has been run by eight tests.

Another file - note the random detection of code to be tested (nothing in this file has been tested).

Here is an example of css being flagged as untested.

Here's the content of my jest.config.js file:

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  collectCoverage: true,
  collectCoverageFrom: [
    'src/**/*.{vue, js}',
    '!src/main.js'
  ]
}

How do I fix this so that css is not marked as untested and the js within the script tags is marked appropriately in the sfcs?

Answer 1

Some of this is solved by updating the coverage provider to v8. It's still marking all of the sfc as untested in components that haven't been mounted in any test so I'm assuming this is why.