根据文档，通过“wrapper.vm”访问“数据”属性的方式是否正确？

Question

如何在 Vue 测试实例中访问 data 属性？

我看到您可以访问 props，但没有 data 等效项。我可以通过使用 wrapper.vm.foo 之类的东西来获取数据属性，但我觉得还有另一种方法可能更符合测试框架的要求。

App.vue

<script>
    export default {
      data() {
        return {
          foo: 'bar'
        }
      }
    }
</script>

App.spec.js

import { shallowMount } from '@vue/test-utils'
import App from '@/App.vue'
import { expect } from 'chai';

describe("App.vue", () => {

  let wrapper;

  beforeEach(() => {
    // use this to check the state of anything in the view
    wrapper = shallowMount(App)
  });

  it("Module has the expected data attribute", () => {
    expect(wrapper.vm.foo).to.equal('bar'); // passes

    expect(wrapper.foo).to.equal('bar'); // fails
    expect(wrapper.data('foo')).to.equal('bar'); // fails
    expect(wrapper.data().foo).to.equal('bar'); // fails
  });


  it('simple passing test', () => {
    expect(1).to.equal(1);
  });


});

Answer 1

也许可以，但.vm才是正确的方法。

示例来自 vue-test-utils documentation:

it('button click should increment the count', () => {

  expect(wrapper.vm.count).toBe(0)
  const button = wrapper.find('button')
  button.trigger('click')

  // `wrapper.vm.count` it is!
  expect(wrapper.vm.count).toBe(1)

})

Answer 2

稍微修改一下 DevLime 的答案，我更喜欢使用 wrapper.vm.$data 而不是 wrapper.vm，如下所示：

it('button click should increment the count', () => {

    expect(wrapper.vm.$data.count).toBe(0)
    const button = wrapper.find('button')
    button.trigger('click')

    // `wrapper.vm.$data.count` it is!
    expect(wrapper.vm.$data.count).toBe(1)

})

它与 Vue 测试工具的 V2 版配合得很好。

根据文档，通过“wrapper.vm”访问“数据”属性的方式是否正确？

Is accessing `data` properties via `wrapper.vm` the correct way, as per the docs?

vue.js

vuejs2

chai

vue-test-utils