Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Suppress Vue warnings in unit tests

I am trying to suppress my warnings in my tests following the config listed here: https://vue-test-utils.vuejs.org/api/config.html#silent, which is as follows:

import { config } from '@vue/test-utils';

// this should actually be the default but the default is not working
config.silent = true;

However, I am still seeing the warning in the test results:

  TheQueue
✓ should show the queue bar if there are items queued
✓ should show the correct count of queued items in queued bar
[Vue warn]: Avoid mutating a prop directly since the value will be 
overwritten whenever the parent component re-renders. Instead, use a 
data or computed property based on the prop's value. Prop being 
mutated: "mdTemplateData"

found in

---> <MdTab>
       <MdContent>
         <MdTabs>
           <MdDrawer>
             <TheQueue> at src/components/the-queue/TheQueue.vue
               <Root>

It's worth noting that I do not see this error in normal usage of the app. This only pops up in tests (otherwise I would attempt to fix the actual suggested issue).

What am I doing wrong here and why can I not suppress these warning? Or am I misunderstanding what silent is supposed to do?

like image 341
boardlemur Avatar asked Dec 04 '18 20:12

boardlemur


1 Answers

According to the VueJS docs - https://vue-test-utils.vuejs.org/api/config.html#silent

silent

type: Boolean

default: true

It suppresses warnings triggered by Vue while mutating component's observables (e.g. props). When set to false, all warnings are visible in the console. This is a configurable way which relies on Vue.config.silent.

which relies on Vue.config.silent, so all you need is to import vue package and set it's config.silent to false

import Vue from `vue`
Vue.config.silent = true;

I put a working example here in my Github, it's just a fork of official example but it doesn't show warnings during the tests.

https://github.com/al1b/vue-test-utils-getting-started

For more information:

If you check the source code:

  warn = (msg, vm) => {
    const trace = vm ? generateComponentTrace(vm) : ''

    if (config.warnHandler) {
      config.warnHandler.call(null, msg, vm, trace)
    } else if (hasConsole && (!config.silent)) {
      console.error(`[Vue warn]: ${msg}${trace}`)
    }
  }
like image 168
Ali Bahrami Avatar answered Jan 02 '23 18:01

Ali Bahrami