vue.js est unit - 如何根据计算值测试观察者？ （不推荐使用 setComputed）

Posted 2023-02-22

【中文标题】vue.js est unit - 如何根据计算值测试观察者？ （不推荐使用 setComputed）

【英文标题】：vue.js est unit -How to test a a watcher based on computed value ? ( setComputed is deprecated)

【发布时间】：2019-03-25 14:58:40

【问题描述】：

我的组件中有一个语言观察者 我从 getter 获取当前语言（它的值从工具栏语言选择器更改，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");
  );

有没有办法测试这个监视块，或者我应该重组我的代码以避免在这个组件中进行这样的测试...

【参考方案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);
  );