unit-testing - 带有 Vuetify 的 Vue Composition Api 未能通过 jest 进行单元测试

Question

我尝试在 vue 组件上运行单元测试，这些组件是用 @vue/composition-api 包编写的，它们也使用 vuetify。

应用程序按预期运行，但是当我运行测试时，我无法访问 context.root.$vuetify 下的断点属性。当我打印 context.root.$vuetify 时，请查看 vue 组件实例。

当我尝试像这样访问它时，错误是“无法读取未定义的属性‘mdAndDown’”:

context.root.$vuetify.breakpoint.mdAndDown

这是我的 Jest 配置文件:

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
  transform: { '^.*\\.js$': 'babel-jest' },
  transformIgnorePatterns: ['node_modules/(?!vue-router|@babel|vuetify)'],
  setupFiles: [
    "<rootDir>/tests/unit/setup-env.ts",
  ],
};

这是组件文件:

<template>
  <v-app
    class="sst-app-container"
  >
    <cmp-loading
      v-show="!loadedBasic"
    />
    <div
      id="app-wrp"
      v-show="loadedBasic"
    >
      <cmp-side-bar />
      <v-content
        class="fill-height"
      >
        <router-view></router-view>
      </v-content>
    </div>
  </v-app>
</template>

<script lang="ts">
import {
  computed, createComponent, onMounted, reactive, toRefs, watch,
} from '@vue/composition-api';
import basicSetup from '@/modules/core/composables/basic-setup';
import initMd from '@/modules/core/devices/mouse/composables/init-md';
import store from '@/stores';
import cmpSideBar from '../components/sidebar/CoreSideBar.mouse.vue';
import cmpLoading from '../components/loading/CoreLoading.vue';


export default createComponent({
  components: {
    cmpLoading,
    cmpSideBar,
  },
  setup(props, context) {
    console.log(context.root.$vuetify)
    const basics = basicSetup();

    return {
      ...basics,
    };
  },
});
</script>

这是我的测试:

import Vue from 'vue';
import Vuetify from 'vuetify';
import BtnCmp from '../../../../../components/vc-btn.vue';
import CmApi from '@vue/composition-api';
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import {
  faPlug,
  faSignOut,
  faCog,
  faUser,
  faTachometer,
  faArrowLeft,
  faArrowRight,
} from '@fortawesome/pro-duotone-svg-icons';

library.add(
  faPlug,
  faSignOut,
  faCog,
  faUser,
  faTachometer,
  faArrowLeft,
  faArrowRight,
);

import { Breakpoint, Theme, Application, Goto, Icons, Lang, Presets } from 'vuetify/lib/services';
import {
  mount,
  createLocalVue,
} from '@vue/test-utils';
import Core from '../views/Core.mouse.vue';

const vue = createLocalVue();

vue.component('font-awesome-icon', FontAwesomeIcon);
vue.component('vc-btn', BtnCmp);

vue.use(Vuetify);
vue.use(CmApi);

describe('Core', () => {
  let vuetify;

  beforeEach(() => {
    vuetify = new Vuetify({
      mocks: {
        breakpoint: new Breakpoint({
          breakpoint: {
           scrollBarWidth: 0,
           thresholds: {
             xs: 0,
             sm: 0,
             md: 0,
             lg: 0,
           },
        },
      },
    });
  });

  it('renders the correct markup', async () => {
    // Now mount the component and you have the wrapper
    const wrapper = mount(Core, {
      localVue: vue,
      vuetify,
      stubs: ['router-link', 'router-view'],
      mocks: {
        $t: () => 'some specific text'
      },
    });

    expect(wrapper.html()).toContain('....');
  });
});

Answer 1

这可以通过向包装器添加一个新的 vuetify 实例来解决 vuetify: new Vuetify()