문서에 따르면 "wrapper.vm"을 통해 "data" 속성에 액세스하는 것이 올바른 방법입니까?

문서에 따르면 "wrapper.vm"을 통해 "data" 속성에 액세스하는 것이 올바른 방법입니까?

에 접속하려면dataVue 테스트 인스턴스의 속성

에 액세스 할 수 있습니다.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);
  });


});

가능할지 모르지만.vm올바른 방법입니다.

의 예vue-test-utils 문서:

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)

})

DevLime의 답변을 조금 수정해서 wrapper.vm을 사용하는 것을 선호합니다.다음과 같이 wrapper.vm 대신 $data:

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에서는 정상적으로 동작합니다.

언급URL : https://stackoverflow.com/questions/54922941/is-accessing-data-properties-via-wrapper-vm-the-correct-way-as-per-the-docs