2

I've created a component using a v-model and I want to component test it, but I can't seem to make the v-model work with the mount(). Here's my test and a couple of things I've tried. Thx.

import { mount } from 'cypress/vue'
import Component from '../../../src/components/MyComponent.vue'

let myData = null
let columns = null

beforeEach(() => {
    cy.fixture('MyFixture.json').then(function (data) {
        myData = data
    })
})

...
it('initial test', () => {
    mount(Component, {
        props: {
            value: myData,
        }
    })
})

I've also tried 'v-model': myData but nothing seems to work.

Note that all other props works, they are omitted here for brevity.

GlutenBoy
  • 103
  • 5

1 Answers1

2

Turns out the answer is modelValue

it('initial test', () => {
    mount(Component, {
        props: {
            modelValue: myData,
        }
    })
})
GlutenBoy
  • 103
  • 5
  • 1
    Logically we would also want to update the value of myData during the test to confirm the effect on the component, I tried this locally but the mounted cypress component does not take into account the change of a modelValue variable. Any suggestions? – DMonkey Aug 03 '22 at 09:45
  • @DMonkey: I had a similar question: See https://stackoverflow.com/questions/73895960/how-to-test-reactiveness-of-vue-component-in-cypress-componet-tests/73900285#73900285. – msebas Sep 30 '22 at 06:12