如何在 Vue3 中对设置的内部函数（不返回）进行单元测试？答案

【问题标题】：How to unit test inner function(not return) of setup in Vue3?如何在 Vue3 中对设置的内部函数（不返回）进行单元测试？
【发布时间】：2021-12-18 17:13:47
【问题描述】：

我想这样测试。

案例 1：错误

无法窥探内部属性，因为它不是函数；取而代之的是未定义。

组件.vue

export default {
  setup() {
    function outer() {
      inner();
    }
    function inner() {
      // do something for only outer function
    }
    return { outer };
  }
};

Component.spec.js

it('what can I do?', () => {
  wrapper.vm.inner = jest.fn(); // throw error
  wrapper.vm.outer();
  expect(wrapper.vm.inner).toBeCalled();
});

案例 2：错误

组件.vue

export default {
  setup() {
    function outer() {
      inner();
    }
    function inner() {
      // ...
    }
    return { outer, inner }; // add inner
  }
};

Component.spec.js

it('what can I do?', () => {
  wrapper.vm.inner = jest.fn();
  wrapper.vm.outer();
  expect(wrapper.vm.inner).toBeCalled();
});

期望(jest.fn()).toBeCalled()
- 预计调用次数：>= 1
- 接听电话数：0

案例 3：通过

it('what can I do?', () => {
  wrapper.vm.outer = jest.fn(() => wrapper.vm.inner());
  jest.spyOn(wrapper.vm, 'inner');
  wrapper.vm.outer();
  expect(wrapper.vm.inner).toBeCalled();
});

这个案子不好看……

如果不将它包含在“return”中，我不能得到“inner()”吗？

这些方法在选项 api 中实现时通过。但我只想使用 setup()。

【问题讨论】：

标签： vue.js unit-testing jestjs vue-composition-api vue-test-utils

【解决方案1】：

自我回答

我找到了办法。我做了一个这样的课程。

Util.js

class Util {
  outer() {
    this.inner();
  }
  inner() {
    // do something...
  }
}

组件.vue

setup() {
  const util = reactive(new Util());
  function call() {
    util.outer();
  }
  return { util, call };
}

Component.spec.js

it('is this way correct?', () => {
  jest.spyOn(wrapper.vm.util, 'outer');
  jest.spyOn(wrapper.vm.util, 'inner');
  await wrapper.vm.call();
  expect(wrapper.vm.util.outer).toBeCalledTimes(1);
  expect(wrapper.vm.util.inner).toBeCalledTimes(1);
});

【讨论】：