Cypress 10.x测试Vue3组件时v-model不生效如何解决？

核心问题原因 #

当前写法存在3个核心错误，导致v-model无法正常工作：

1. 混淆了Vue2和Vue3的v-model底层规则：Vue3默认v-model绑定的prop为modelValue，对应更新事件为update:modelValue，不再使用Vue2时代默认的value prop + input事件规则。
2. 异步fixture未做同步：cy.fixture是异步命令，在beforeEach里直接给外部变量赋值的写法，不会等待fixture加载完成就执行测试用例，此时传入的myData实际为null。
3. 错误将v-model作为prop传入：v-model是模板语法糖，不是组件的合法prop，直接写'v-model': myData不会被Vue识别处理。

正确配置方式 #

方式1：手动映射v-model对应的prop和事件（轻量场景推荐） #

直接按照Vue3 v-model的编译规则传参，同时处理值更新的同步逻辑：

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

beforeEach(() => {
  // 用别名存fixture，避免异步赋值问题
  cy.fixture('MyFixture.json').as('myTestData')
})

it('initial test', function() {
  // 注意这里不能用箭头函数，否则无法通过this读取别名存的fixture
  mount(Component, {
    props: {
      // 默认v-model对应prop是modelValue，如果你用的是v-model:value才传value
      modelValue: this.myTestData,
      // 监听组件的更新事件，同步更新prop值实现双向绑定
      'onUpdate:modelValue': (newValue) => {
        // 通过wrapper更新prop，模拟真实的v-model同步逻辑
        Cypress.vueWrapper.setProps({ modelValue: newValue })
      }
      // 如果组件自定义了v-model的修饰名，比如v-model:content，就对应传content prop + onUpdate:content事件
    }
  })

  // 验证绑定是否生效：可以直接读取组件prop判断
  cy.getComponent(Component).then(vm => {
    expect(vm.props.modelValue).to.deep.equal(this.myTestData)
  })
})

方式2：包装父组件使用原生v-model语法（复杂场景推荐） #

如果需要完全模拟真实使用场景的v-model行为，可以挂载一个临时父组件，在父组件模板里按正常写法写v-model，不需要手动处理事件映射：

it('test with wrapper component', function() {
  cy.fixture('MyFixture.json').then(testData => {
    mount({
      components: { MyComponent: Component },
      data() {
        return {
          bindData: testData
        }
      },
      template: `<MyComponent v-model="bindData" />`
    })

    // 需要操作绑定值时，直接拿到父组件实例修改即可
    cy.vue().then(vm => {
      // 例如模拟外部修改绑定值：vm.bindData = newValue
    })
  })
})

注意事项 #

• 如果你在组件中自定义了v-model的参数，比如写的是v-model:searchKey，那么对应的prop名就是searchKey，更新事件为update:searchKey，传参时对应替换即可。
• 不要使用外部变量承接fixture的内容，Cypress的命令是异步队列执行，外部变量赋值时机无法和测试用例执行时机对齐，推荐用别名、或者链式调用.then()的方式拿到fixture内容。
• 其他props能正常生效是因为它们的prop名和传入的key一致，且没有依赖双向同步逻辑，所以不受上述问题影响。

内容的提问来源于stack exchange，提问作者GlutenBoy