如何在 vue 组合 api 组件中使用 jest 进行单元测试？答案

【问题标题】：How to unit testing with jest in vue composition api component?如何在 vue 组合 api 组件中使用 jest 进行单元测试？
【发布时间】：2020-06-08 03:39:32
【问题描述】：

我正在用 jest 为我在 vue.js 中的组合 API 组件编写一个单元测试。

但我无法访问组合 API 的 setup() 中的函数。

Indicator.vue

<template>
  <div class="d-flex flex-column justify-content-center align-content-center">
    <ul class="indicator-menu d-flex justify-content-center">
      <li v-for="step in steps" :key="step">
        <a href="#" @click="updateValue(step)" :class="activeClass(step, current)"> </a>
      </li>
    </ul>
    <div class="indicator-caption d-flex justify-content-center">
      step
      <span> {{ current }}</span>
      from
      <span> {{ steps }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import {createComponent} from '@vue/composition-api';

export default createComponent({
  name: 'Indicator',
  props: {
    steps: {
      type: Number,
      required: true
    },
    current: {
      type: Number,
      required: true
    }
  },
  setup(props, context) {
    const updateValue = (step: number) => {
      context.emit('clicked', step);
    };
    const activeClass = (step: number, current: number) =>
      step < current ? 'passed' : step === current ? 'current' : '';
    return {
      updateValue,
      activeClass
    };
  }
});
</script>

<style></style>

Indicator.test.ts

import Indicator from '@/views/components/Indicator.vue';
import { shallowMount } from '@vue/test-utils';

describe('@/views/components/Indicator.vue', () => {  
  let wrapper: any;
  beforeEach(() => {
    wrapper = shallowMount(Indicator, {
      propsData: {
        steps: 4,
        current: 2
      }
    });
  });
  it('should return "current" for values (2,2)', () => {
    expect(wrapper.vm.activeClass(2, 2)).toBe('current');
  });
});

我在运行测试命令时遇到了这个错误：

TypeError: 无法读取未定义的属性“vm”

【问题讨论】：

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

【解决方案1】：

我认为只需导入 CompositionApi 即可解决您的问题。

import CompositionApi from '@vue/composition-api'

Vue.use(CompositionApi)

【讨论】：

看起来成功了，谢谢！我敢打赌，当 Vue 3 出现时，我们不必这样做。

【解决方案2】：

我还建议默认使用jest.config.js文件来初始化它：

setupFiles: ['<rootDir>/tests/helpers/foo.js']

然后在您的 tests/ 文件夹中创建带有文件 foo.js 的 helpers/

并在文件中：

import Vue from 'vue'
import CompositionApi from '@vue/composition-api'
Vue.use(CompositionApi)

【讨论】：

【解决方案3】：

在 nuxt.js 版本 2 @andrej-gaspar 解决方案几乎可以工作，但它会引发 Cannot read property install of undefined 错误，因此要修复该错误，请执行以下操作：

jest.config.js

setupFiles: ['<rootDir>/tests/helpers/foo.js']

foo.js

import Vue from 'vue'
import * as CompositionApi from '@vue/composition-api'
Vue.use(CompositionApi)

或者，如果您使用的是@nuxtjs/composition-api：

import Vue from 'vue'
import * as CompositionApi from '@nuxtjs/composition-api'
Vue.use(CompositionApi)

【讨论】：