Vuetify Jest 未知自定义元素 <v-*>

Question

我正在使用 Jest 为我的项目编写单元测试。项目基于 Vue、Vuetify (1.5) 和 TypeScript（以及 vue-属性-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/",
    "^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

我设法解决了这个问题。必须更改两行代码：

在我的 Btn 组件中，将 VBtn 导入更改为： import { VBtn } from 'vuetify/lib/components/VBtn';（从 vuetify/lib/components/VBtn 导入，而不是从 vuetify/lib 导入）。

在 jest.config.js 中将 moduleNameMapper 更新为 'vuetify/lib(.*)': '<rootDir>/node_modules/vuetify/es5'。

就是这样，现在可以了:)

我整个jest.config.js:

module.exports = {
  moduleFileExtensions: [
    "js",
    "ts",
    "json",
    "vue"
  ],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/",
    'vuetify/lib(.*)': '<rootDir>/node_modules/vuetify/es5',
  },
  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'],
}

Answer 2

使用以下设置在您的 tests/unit 文件夹中创建 index.js/index.ts

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"],
};

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

Vuetify Jest 未知自定义元素 <v-*>

Vuetify Jest Unknown custom element <v-*>

typescript

vue.js

jestjs

vuetify.js

ts-jest