vue.js est单位-如何基于计算值测试观察者？ （不建议使用setComputed）

Question

我的组件中有一个语言观察者 我从吸气剂获得当前语言（其值已从工具栏语言选择器中更改，默认为state.language为“ en”）

ContactForm.vue

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

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

我正在测试手表块

ContactForm.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");
  });

有什么方法可以测试此监视块，还是应该重组代码以避免在此组件中进行这种测试...

Answer 1

我解决了这个问题...观察者是异步的，所以我只是延迟了断言

  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);
  });