Vue3组合式API测试中如何获取Ref值并验证v-if渲染效果

问题原因 #

你使用的是Vue3 Composition API，在setup中通过ref声明的内部状态不属于Options API的data范畴，因此挂载组件时通过data配置项覆盖isCovid的写法不会生效，组件始终会读取你初始化的ref(true)默认值。

解决方案 #

分两种场景处理：

• 场景1：isCovid为外部可控的状态，建议定义为组件props
  先调整组件代码：

  <template>
    <div v-if="isCovid" class="covid"/>
  </template>
  <script>
  export default {
    props: {
      isCovid: {
        type: Boolean,
        default: true
      }
    },
    // 无需再在setup中单独声明isCovid的ref
    setup(props) {
      // 业务逻辑直接使用props.isCovid即可
    }
  }
  </script>
  

  调整后测试代码直接传入props即可：

  it('do not render covid waring when its false', () => {
    const wrapper = mount(TicketHeader,{
      props: { isCovid: false }
    });
    expect(wrapper.find('.covid').exists()).toBe(false)
  });
  

• 场景2：isCovid为组件内部私有状态
  先确保setup中已经将isCovidreturn暴露：

  setup() {
    const isCovid = ref(true);
    // 必须return才能在测试中通过vm实例访问
    return { isCovid };
  }
  

  测试代码修改为主动修改状态后等待DOM更新再断言：

  // 测试函数加async修饰
  it('do not render covid waring when its false', async () => {
    const wrapper = mount(TicketHeader);
    // 修改内部状态
    wrapper.vm.isCovid = false;
    // 等待DOM更新完成
    await wrapper.vm.$nextTick();
    expect(wrapper.find('.covid').exists()).toBe(false)
  });
  

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