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

最新推荐文章于 2025-08-02 20:47:30 发布

原创最新推荐文章于 2025-08-02 20:47:30 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Jest 同时被 2 个专栏收录

4 篇文章

订阅专栏

Vue Test Utils

4 篇文章

订阅专栏

博客主要介绍了Vue Test Utils对data的赋值方法。官网用法是使用setData()，另外也可直接用wrapper.vm。两者存在区别，注入新data值时，vue的this.$set()操作会报错，而用wapper.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赋值，可以通过测试