테스트에서 vue 계산 속성을 수동으로 업데이트하는 방법

테스트에서 vue 계산 속성을 수동으로 업데이트하는 방법

컴포넌트가 있습니다.FooVuex 바인딩 포함mockedVuexBinding(이것은 본질적으로 계산된 지지대입니다).

나는 테스트를 단순하게 하고 전체 가게를 조롱하고 싶지 않다.테스트에서 계산된 스터브로 교체한 모든 vuex 바인딩은 다음과 같습니다.

const wrapper = shallowMount(Foo, {
  computed: {
    mockedVuexBinding: () => 'foo'
  }
}

하지만 알고보니, 그 때 제가 그 사람의 행동을 실험해 봐야 할 것 같아요.Foo계산된 속성 변경 시 릴레이합니다.따라서 계산된 값을 사용하여 컴포넌트가 어떻게 반응하는지 테스트합니다(예: 새로운 값을 내보냅니다).

같은 방법은 없다setComputed에 비유하여wrapper.setProps또는wrapper.setData어떻게 하면 좋을까요?조롱된 계산값을 다른 값으로 대체하려면 어떻게 해야 합니까?

통상대로 모든 것을 조롱할 수 있습니다.테스트 중에 계산된 값이 변경되었을 때 동작을 조롱하기 위해 다음 작업을 수행할 수 있습니다.

const wrapper = mount(Component, {
  data() {
    return {
      computedSwitcher: false
    };
  },
  computed: {
    someComputed: {
      get() {
        return this.computedSwitcher;
      },
      set(val) {
        this.computedSwitcher = val;
      }
    }
  }
});

그리고 테스트 중에 계산한 내용을 변경해야 할 경우 다음과 같이 수행합니다.

wrapper.vm.someComputed = true;

즉, 실제 컴포넌트에는 존재하지 않는 시뮬레이트된 computedSwitcher에 링크하여 계산 동작을 시뮬레이트합니다.

한 가지 주의할 점은 계산된 값이 재렌더링을 트리거하고 계산 변경 후 여기에 연결되어 있는 것을 확인하고 싶은 경우 콜도 호출합니다.

await wrapper.vm.$nextTick();

언급URL : https://stackoverflow.com/questions/56651650/how-to-manually-update-vue-computed-property-in-test