typescript - Vuetify Jest 未知自定义元素

Question

我正在使用 Jest 为我的项目编写单元测试。项目基于 Vue、Vuetify (1.5) 和 TypeScript(以及 vue-property-decorator)。

我有 <v-btn> 的基本包装器.它看起来像这样:

<template>
  <v-btn
    :round="!square"
    v-on="$listeners"
  >
    <slot />
  </v-btn>
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator';

import { VBtn } from 'vuetify/lib';

@Component({
  components: {
    VBtn,
  },
})
export default class Btn extends Vue {
  @Prop({ default: false, type: Boolean }) private square!: boolean;
}
</script>

我写了基本测试，只是为了挂载这个组件:

import { mount } from '@vue/test-utils'
import Vue from 'vue';
import Btn from './Btn.vue';

describe('Btn', () => {

  it('should render button', () => {
    const wrapper = mount(Btn, {
      propsData: {
        onClick: () => {}
      }
    });

    console.log((Vue as any).options.components.VBtn)

    console.log('=======================');
    console.log(wrapper.html());
    console.log('=======================');
  });
});

运行测试时，我收到此错误:

  console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
    [Vue warn]: Unknown custom element: <v-btn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    found in

    ---> <Btn>

但我知道该组件已注册 - 它在运行项目(而不是测试)时有效。此外，我有控制台登录测试，检查它是否已注册( console.log((Vue as any).options.components.VBtn) )，并显示该组件已全局注册。

这是我的 jest.config.js :

module.exports = {
  moduleFileExtensions: [
    "js",
    "ts",
    "json",
    "vue"
  ],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
    "^vuetify/lib$": "vuetify",
  },
  modulePaths: [
    "<rootDir>/src",
    "<rootDir>/node_modules"
  ],
  transform: {
    ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
    "^.+\\.ts?$": "ts-jest",
    ".*\\.(vue)$": "vue-jest",
  },
  transformIgnorePatterns: [
    "<rootDir>/node_modules/(?!(vuetify)/)",
  ],
  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(js?|ts?)$",
  setupFilesAfterEnv: ['<rootDir>/tests/unit/setup.ts'],
}

和 setup.ts文件:

import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.config.productionTip = false;
Vue.use(Vuetify);

我试图从 setup.ts 移动代码测试，但它没有改变任何东西。我认为 'vue-property-decorator' 可能有问题但是我的整个项目都是基于它的，所以我不想改变它。
你能帮助我吗？也许我的 Jest 转换配置有问题？

Answer 1

创建 index.js/index.ts在您的 tests/unit具有以下设置的文件夹

import Vue from "vue";
import Vuetify from "vuetify";
Vue.config.productionTip = false;
Vue.use(Vuetify);

更新您的 jest.config.js在你的项目的根目录

module.exports = {
  ...
  setupFiles: ["<rootDir>/tests/unit/index.ts"],
};

生成 Vuetify 时看起来像是自动生成的错误项目来自 CLI .简而言之，就是因为 Vuetify未在您的测试项目中注册。