How to bypass test coverage for external/dependency vue components?

Question

We have two vue3 projects. Project 1 has some components that use components from Project 2 as imported dependencies.

In Project 1, MyComponent.vue:

<template>
  <Project2Modal> Some html here </Project2Modal>
</template>

<script>
import { defineComponent } from 'vue';

import Project2Modal from 'project2/components/Project2Modal.vue';

export default defineComponent({
  components: {
    Project2Modal,
  },
  props: {
    title: {
      type: String,
      required: true,
    },
    ...
});
</script>

The problem we are having is that, when we try to test (using jest and vue-test-utils) those components from Project 1, the test coverage also includes coverage for the Project 2 dependency components (as demonstrated by the "uncovered" lines not being part of the MyComponent.vue file at all). Which makes the overall Project 1 test coverage way lower than it should be (it becomes 100% when we remove the project2Modal component from the template).

Project 1 test --coverage

------------------------------------------|---------|----------|---------|---------|-------------------
File                                      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
------------------------------------------|---------|----------|---------|---------|-------------------
All files                                 |   96.96 |    90.04 |   96.07 |   97.05 |                   
 src                                      |     100 |      100 |     100 |     100 |                   
  globals.js                              |     100 |      100 |     100 |     100 |                   
 src/components                           |   73.33 |       25 |      20 |   73.33 |                   
  MyComponent.vue                         |   73.33 |       25 |      20 |   73.33 | 118-136

How can we tell jest from Project 1 to bypass the test coverage for Project 2 components? (as those are already tested in Project 2).

In jest.config.js we have already tried forbidding getting coverage from Project 2 but this does nothing:

  collectCoverageFrom: [
    '!<rootDir>/node-modules/project2',
  ],

We haven't found any related or already asked question for this problem, so any help would be much appreciated!

Matt Chambers · Accepted Answer · 2023-01-16 18:19:28Z

0

Are you using Istanbul? It looks like you might be able to achieve what you want in a couple of ways with that, or you can amend your Jest setup in the package.json directly.

I used this article when I was ignoring imported files when testing for coverage and it got me sorted.

answered Jan 16, 2023 at 18:19

Matt Chambers

115 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

CatDev Over a year ago

We are indeed using Instanbul but unfortunately none of those solutions from the article work for us :( Thanks anyway for the help!

Matt Chambers Over a year ago

@CatDev dang it. I know it seems weird but have you tried adding an empty new line between the Istanbul comment and the import line in the component you shared in the OP, I've seen that work occasionally?

Matt Chambers Over a year ago

And not exactly friendly or pretty, but if you're using Istanbul in project2 then you could try put this line at the top of the Project2Modal.vue file - /* istanbul ignore file */

CatDev Over a year ago

I just tried adding the newline between the import and the comment but it still doesn't do anything. If we add that ignore file comment on that file then it will be ignored from the test coverage for Project 2 which is already tested so we can't do that :(

Collectives™ on Stack Overflow

How to bypass test coverage for external/dependency vue components?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related