时间戳

首页 > 解决方案 > Vuetify Jest Unknown 自定义元素

typescript - Vuetify Jest Unknown 自定义元素

问题描述

我正在使用 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 转换配置有问题？

标签： typescriptvue.jsjestjsvuetify.jsts-jest

解决方案

使用以下设置在您的文件夹中创建index.js/index.tstests/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没有在你的测试项目中注册。

推荐阅读