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

Posted 2023-02-22

【中文标题】Vuetify Jest 未知自定义元素 <v-*>

【英文标题】：Vuetify Jest Unknown custom element <v-*>

【发布时间】：2020-09-01 00:03:23

【问题描述】：

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

【参考方案1】：

使用以下设置在您的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没有在你的测试项目中注册。

【参考方案2】：

我设法解决了这个问题。只好改两行代码：

在我的 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$1'。

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

我的整个jest.config.js：

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

【讨论】：

这行得通的原因。是因为 jest 不会转译任何代码，因为它在节点而不是浏览器中运行。为生产和开发完成的任何特殊配置也需要添加到单元测试中，这是一个完全独立的管道。