How to check v-model update?

[T0miii]

I have a rather simpe Vue 3 Select Component

I click the input , dropdown opens, i click label value gets emited trough modelValue (v-model), new option is shown as selected.

How can i test this with cypress component tests

  it('renders', () => {
    let data = '3'
    cy.mount(MySelect, {
      props: {
        options,
        modelValue: data,
      },
    })

    cy.get('div.my-select').click()

    cy.get('div.my-dropdown__menu').should('be.visible')
    cy.get('li.my-select-dropdown__item').first().click()
  })
})

it mounts with the value 3 selected, but when the test opens the dropdown and click on another option the selected does not get updated.

[thomiNG]

I also ran into this problem. Does anyone know how update v-model?

[T0miii]

JSX was the only way we could make it work, Should be probably better described in the docs tho.

import CheckboxComponent from './CheckboxComponent.vue'
import {ref} from "vue";

describe('<CheckboxComponent />', () => {
  it('renders', () => {
    // see: https://on.cypress.io/mounting-vue
    const model = ref<unknown[]>([])
    cy.mount(() => (
        <CheckboxComponent v-model={model.value} label="Check This Item"/>
    ))
  })
})

[gigabites19]

Using v-model directly didn't work for me but this did:

// ...
  it('renders', () => {
    // see: https://on.cypress.io/mounting-vue
    const model = ref<unknown[]>([])
    cy.mount(() => (
        <CheckboxComponent
            modelValue={model.value}
            onUpdate:modelValue={(newValue) => model.value=newValue}
            label="Check This Item"
        />
    ))
  })
// ...

I had to also do:
import { ref } from 'vue' for this to run even though I am not using it directly. I am on Vue3/Vite and I enabled JSX only for cypress.