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

Question

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

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

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

context.root.$vuetify.breakpoint.mdAndDown

这是我的笑话配置文件：

context.root.$vuetify.breakpoint.mdAndDown

这是组件文件：

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>

Answer 1

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