I have found a solution to the specific warning: the reference to fullscreen is inside the function mounted() of the Notify plugin.

I have mocked mounted() with:

  Notify.mounted = () => {
    return jest.fn()
  }

and the warning has disappeared.

Hello,

I have a jest unit test of a component that uses the notify plugin. If import the plugin into the test with:

import { Notify } from 'quasar'

and then:

localVue.use(Quasar, { components, plugins: [Notify] })

I get an annoying warning on the console:

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'fullscreen' of undefined"

I am sure it’s the notify plugin because if I remove the plugin the message goes away.

Even if the test works, I’d like to get rid of the warning message, so I was wondering if there is a good way to mock the notiify plugin. I’ve tried with the following mock but it’s clearly wrong:

const Notify = {
  notify () {
    console.log('notify')
  }
}

Have you got any tip to share?
Thanks!

Hello, little update form my side:

I have found out how to set the new value inside inside the q-input: you need to find a regular input instead of a q-input instance:

it('sets a value correctly', async () => {
    const input = wrapper.find('input[type=text]')
    input.setValue('test 1')
    expect(wrapper.vm.value).toBe('test 1')
}

This actually sets the text inside the q-input and also trigger the input event. Problems: if the q-input manages a prop directly (as in the example above), the test will pass, but Vue will complain with a:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.

To avoid this, I have tried using data inside the q-input v-model instead of props directly:

<template>
<div>
  <q-input  v-model="text" @input="update()"></q-input>
</div>
</template>

<script>
export default {
  name: 'QINPUT',
  props: [ 'value' ],
  data () {
    return {
      text: this.value
    }
  },
  methods: {
    update () {
      this.$emit('input', this.text)
    }
  }
}
</script>

Note that here v-model=“text” instead of value. The effect is that the warning disappears, but after calling setValue(), the change is not propagated to wrapper.vm.value, even if I use await wrapper.vm.$nextTick() and the test fails.

So I haven’t found a way to properly test components that modify an input. This is a pity because most of my components are actually editors of some type of information. This guide here doesn’t help either.

I have the same problem, but I am using Quasar v1.5 and Quasar testing tools.

So my problem is that I have a component with a q-input and I would like to change its value and see how that affects the rest of the component.

Simplifying a bit, I have a component with a q-input inside. It is filled in with a value that comes from the props of the containing component. Like:

<template>
<div>
  <q-input v-model="value" @input="update()"></q-input>
</div>
</template>

<script>
export default {
  name: 'QINPUTDEMO,
  props: [ 'value' ],
  methods: {
    update () {
      this.$emit('input', this.value)
    }
  }
}
</script>

So you use it like here:

<template>
 <p>An example using the q-input demo</p>
 <q-input-demo v-model="txt"/>
</template>

<script>
export default {
  data () {
    return {
      txt: 'test'
    }
  }
}
</script>

In my test, I would like to write into the q-input and verify that the text has changed correctly:

it('sets the translated texts', async () => {
  const qinput = wrapper.find(components.QInput)
  qinput.setValue('text 1')
})

When I call setValue() the testing framework says: " [vue-test-utils]: wrapper.setValue() cannot be called on this element".

Any idea about how to fix it?