如何构建Vue组件测试以具有良好的覆盖率？

问题描述

我通常想知道如何正确测试Vue组件以涵盖几乎所有内容，以自信地告诉客户它可以工作，并且除非发生大的事情，否则它不会失败。

就我而言，我正在使用Jest作为测试框架。它带有遵循伊斯坦布尔模式的报道报告。

但是我不确定如何构造测试以最大程度地减少开销，最大化测试速度（或至少不产生瓶颈），最大化可扩展性和最大化测试覆盖范围。

此外，我也不确定集成测试 在这里您可以处理多个组件，mixins，vuex存储和其他js文件的交互。

他们应该有一个单独的专用文件还是将所有内容都放入一个文件中？

所以我的问题是，如何将所有内容放在一起，因为我可以在每个测试中编写好的单个测试，但是要找到一个好的结构来帮助我和我的同事在覆盖范围和低开销方面感到困难。

这是我最近开发的一种结构示例，可以使用jest＆vue-test-utils测试某些Vue组件：

//some imports
describe("Test Vue-Component X",() => {

  let wrapper = null; 
  beforeAll(async () => {            //Could also be beforeEach. (Depends on the component I guess
    localVue = createLocalVue();
    localVue.use(Vuex);
    vuetify = new Vuetify();
    wrapper = mount(somecomponent,{
      mocks: {
        $t: (key) => translations["messages"]["EN"][key],},localVue,store,vuetify,});
  });

  describe("Initial State test",() => {
    /**
     * GIVEN 
     * WHEN 
     * THEN 
     */
    test("checks if Component X exists",() => {
      expect(wrapper.vm.$options.name).toBe("X");
      expect(wrapper.exists()).toBe(true);
    });
    describe("Created",() => {});
    describe("Mounted",() => {});
    //Does it generally make sense to go throw each lifecycle-hook or is it rather test specific?
  });
  describe("computed Properties: ",() => {
    describe("Property Y",() => {
      /**
       * GIVEN  
       * WHEN 
       * THEN 
       */
      test("Test some Expected Outcome",() => {
      });
      /**
       * GIVEN  
       * WHEN 
       * THEN 
       */
      test("Test Error Cases",() => {});
    });
    describe("Proterty Z",() => {});
  });
  describe("methods ",() => {
    describe("Method 1",() => {
      /**
       * GIVEN 
       * WHEN 
       * THEN 
       */
      test("Test some expected outcome given a specific imput ",() => {});
      /**
       * GIVEN 
       * WHEN 
       * THEN 
       */
      test("Test Error-case 1",() => {});
    });
    describe("Method 2 ",() => {});
    describe("Method 3... ",() => {});
  });
  describe("Watch ",() => {
    describe("Watcher A",() => {});
  }); 
  describe("Interaction Vuex store? ",()=>{
      //e.g. test if the store yields some stuff that is breaking the UI 
  });  
  describe("Interaction with template? ",()=>{
      // would go in the direction of ui-test similar to the selenium tests
  });  
  describe("Dedicated Bug Area? ",()=>{
      //all tests made because of bug reports
  }); 
  describe("Events or Interaction with other components? ",()=>{
      //all tests made because of bug reports
  }); 
});

我不确定的部分标有“？”。

如果您可以将我链接到一个测试，该测试在中型到大型项目中测试100％覆盖率的复杂Vue组件（覆盖单元和集成测试），那就太好了。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）