Vue组件测试报错：Props与Data赋值验证失败

你的测试失败是因为created()钩子只在组件初始化挂载时执行一次：

1. 当你调用mount(SelecionadorData)时，组件没有接收到datainicial props，所以created()里的逻辑把date设为null；
2. 之后调用wrapper.setProps({ datainicial: '2018-01-01' })更新props，但此时created()已经执行完毕，组件没有任何逻辑去监听datainicial的变化，所以date依然保持null。

根据你的业务需求，有两种可行的处理方式：

方案1：监听props变化，动态同步date #

如果你的业务场景中datainicial需要动态更新（比如父组件可能随时修改这个props），可以给组件添加一个watch监听器，在datainicial变化时同步更新date：

export default {
 props: ['numeroDaParcela', 'datainicial'],
 data () {
 return {
 date: null,
 dateBR: '',
 modal: false
 }
 },
 watch: {
 datainicial: {
 immediate: true, // 初始化时自动执行一次，替代created里的逻辑
 handler() {
 this.date = (this.datainicial === '' || this.datainicial === undefined) ? null : this.datainicial
 }
 }
 }
}

这里用watch的immediate: true特性，可以直接替代created()里的初始化逻辑，确保组件初始化和props更新时，date都会同步正确的值。

方案2：挂载组件时直接传入props（适合仅测试初始化场景） #

如果你的测试只是想验证组件初始化时能正确接收props，可以直接在mount时传入props，不需要后续调用setProps()：

import { mount } from 'vue-test-utils'
import SelecionadorData from '@/components/Shared/SelecionadorData.vue'

describe('SelecionadorData.vue', () => {
 it('should receive the props datainicial', () => {
 const wrapper = mount(SelecionadorData, {
 props: {
 datainicial: '2018-01-01'
 }
 })
 expect(wrapper.vm.date).toBe('2018-01-01')
 })
})

这种方式更直接，也符合组件初始化时的props传递逻辑。

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