使用 Jest 对 vuejs 方法进行单元测试答案

【问题标题】：Unit testing vuejs methods using Jest使用 Jest 对 vuejs 方法进行单元测试
【发布时间】：2021-09-16 11:45:28
【问题描述】：

我正在尝试测试 jest 框架中的方法。对于 javascript 方法，我能够使用 require() 函数从文件中导入方法并对其进行测试（expect(addition(1,2).toBe(3))）。但无法在 VueJS 方法中复制相同的内容。

  // VueJS
  export default defineComponent({
  name: "App",
  components: {
    HelloWorld,
  },
  methods: {
    addition(a: number, b: number) {
      return a + b;
    },
    subtraction(a: number, b: number) {
      return a - b;
    },
    multiplication(a: number, b: number) {
      return a * b;
    },
  },
});

测试文件

import addition from "./App.vue"
describe("HelloWorld.vue", () => {
  it("testing vue method", () => {
    expect(addition(1,2).toBe(3));
  });
});

//error on line 4 states "Value of type 'DefineComponent<{}, {}, any, ComputedOptions, MethodOptions, ComponentOptionsMixin, 
// ComponentOptionsMixin, ... 4 more ..., {}>' is not callable. Did you mean to include 'new'?"

【问题讨论】：

查看vue-test-utils.vuejs.org/guides/#knowing-what-to-test - 我的两分钱...对于在 VDOM 中诊断失败测试的额外困难，我宁愿只运行浏览器测试。也许我只是错过了 Jest 的标记。
是的！我指的是使用 JEST 框架进行单元测试。
测试失败，因为默认导入的是组件定义对象，而您出于某种原因期望它是addition函数。当导入出错时，vanilla JS 测试也是如此。可能是expect(comp.options.methods.addition.call(mockInstance, 1, 2))...。但是如上所述使用 Vue utils 测试组件是正确的。单独使用 Jest 的测试没有多大价值，因为您测试的不是原始行为，而是其他东西。

标签： javascript vue.js unit-testing jestjs

【解决方案1】：

App.vue 文件被编译成组件定义，用于使用 Vue Test Util 的 mount 或 shallowMount 实例化 App 组件，从而生成一个测试包装器。包装器有一个vm property，它提供对组件方法和道具的直接访问。

所以你的测试应该看起来像这样：

import { shallowMount } from "@vue/test-utils";
import App from "./App.vue";

describe("App.vue", () => {
  it("testing vue method", () => {
    const wrapper = shallowMount(App);
    expect(wrapper.vm.addition(1,2)).toBe(3);
  });
});

【讨论】：