How to hide "[Vue warn]: Invalid prop: type check failed for prop ..." in tests?

Michal Roharik 0
Viewed 31

I have a VUE component which accepts a prop of type Number. I want to have a test (using vue test utils - jest) covering the situation where the prop is not a number and how it renders in such a case (lets say the value is an A character). The "issue" I am facing is the test runner prints [Vue warn]: Invalid prop: type check failed for prop "count". Expected Number with value NaN, got String with value "A".

I think I understand why this happens, but at the same time I want to have the test in place and don't want that string to print out.

So I am looking for a way to dismiss or hide the warning when in test mode. Is that doable? Thanks

testing vue.js javascript
1 Answers

You can configure app.config.warnHandler via the global.config mounting option to filter out that warning:

const wrapper = mount(MyComponent, {
  props: {
    count: 'A', // should be a number
  },
  global: {
    config: {
      warnHandler(msg, instance, trace) {
        if (msg.includes('Invalid prop: type check failed for prop "count"')) {
          // ignore warning
          return
        }
        console.warn(msg, instance, trace)
      },
    }
  }
})

demo

tony190
Related