programing

vue.jest unit - 계산된 값을 기반으로 Watcher를 테스트하는 방법? (setComputed는 더 이상 사용되지 않습니다.)

oldcodes 2023. 7. 8. 11:09
반응형

vue.jest unit - 계산된 값을 기반으로 Watcher를 테스트하는 방법? (setComputed는 더 이상 사용되지 않습니다.)

구성 요소에 언어 감시자가 있습니다. Getter에서 현재 언어를 가져옵니다(툴바 언어 선택기에서 값이 변경되었으며 상태에서는 기본값입니다. language는 "en"입니다).

연락처 양식.가치관

  ...
  data() {
    return {
      contactLang: "",
      ...
    };
  },
  computed: {
        ...mapGetters(["language"]),
      },
      watch: {
        language(newLanguage) {
          console.lo("language changed to: ", newLanguage);
          this.contactLang = newLanguage;
          this.$validator.localize(newLanguage);
        }
      },

======================

시계 블록을 테스트하려고 합니다.

문의 양식.spec.js

beforeEach(() => {
    // create a fresh store instance for every test case.
    storeMocks = createStoreMocks();
    options = {
      sync: false,
      provide: () => ({
        $validator: v
      }),
      store: storeMocks.store,
      i18n
    };
    wrapper = shallowMount(ContactForm, options);
  });


  it("change the form language when locale changed", () => {
    // update the Vuex store language , but it does not trigger the watcher ...
    wrapper.vm.$store.state.language = "fr";
    expect(wrapper.vm.contactLang).toBe("fr");
  });

이 워치 블록을 테스트할 수 있는 방법이 있습니까? 아니면 이 구성 요소에서 이러한 테스트를 방지하기 위해 코드를 재구성해야 합니까?

문제를 해결했습니다...관찰자들은 비동기식이어서 주장을 지연시킬 뿐입니다.

  it("change the form language when locale changed", () => {
    // pdate the Vuex store language , but it does not trigger the watcher ...
    wrapper.vm.$store.state.language = "fr";
    setTimeout(() => {
      // assert changes operated by watcher
      expect(wrapper.vm.contactLang).toBe("fr");
  }, 50);
  });

언급URL : https://stackoverflow.com/questions/52914022/vue-js-est-unit-how-to-test-a-a-watcher-based-on-computed-value-setcomputed

반응형