Vue Test Utils setData和wrapper.vm赋值的区别

Vue Test Utils对data的赋值

官网上的用法

使用setData()就可以了

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'

test('setData demo', async () => {
  const wrapper = mount(Foo)

  await wrapper.setData({ foo: 'bar' })

  expect(wrapper.vm.foo).toBe('bar')
})

另外用法

直接用wrapper.vm也是一样
但是两者是有区别的

...
wrapper.vm.foo = 'bar'
expect(wrapper.vm.foo).toBe('bar')
...

注入一下新的data值

it('setFormDataKeyValue', ()=> {
    let key = 'qyrlxdh',
        value = '1122334566',
        tObj = {
          qyrlxdh: '',
          a: '',
          b: '',
          c: ''
        }

    wapper.setData({ tObj: tObj })
    // 签约人手机号
    wapper.vm.setFormDataKeyValue(key, value, wapper.vm.tObj)
    expect(wapper.vm.tObj[key]).toBe(value)
    console.log(wapper.vm.tObj[key])

    key = 'a'
    wapper.vm.setFormDataKeyValue(key, value, wapper.vm.tObj)
    console.log(wapper.vm.tObj[key])
  })

vue的this.$set()操作会报错，找不到data上的值

 console.error
    [Vue warn]: Cannot set reactive property on undefined, null, or primitive value: undefined

      1034 |           }
      1035 |         } else {
    > 1036 |           this.$set(res, str, value)
           | ^
      1037 |         }
      1038 |       }
      1039 |     },

用wapper.vm赋值，可以通过测试

...
wapper.vm.tObj = tObj
...