ReferenceError:在Vitest测试套件中未定义计算

Question

描述

我正在将测试套件从Jest迁移到Vitest。但我在运行测试套件时遇到了问题，当组件具有计算属性时会发生错误。

常见的错误是：

ReferenceError: computed is not defined

 - /components/Ui/Avatar.vue:13:30
 - /node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:157:22
 - /node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7084:29
 - /node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7039:11
 - /node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5401:13
 - /node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5376:17
 - /node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4978:21
 - /node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5515:21
 - /node_modules/@vue/reactivity/dist/reactivity.cjs.js:189:25
 - /node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5622:56

版本

• “最暴力”："^0.18.1“
• "jsdom"："^20.0.0“
• "@vue/test-utils"："^2.0.2“

例

以下是我的组件代码：

<template>
  <image
    :src="src"
    :onerror="onErrorLoadImage"
    :class="['avatar', { big }]"
  />
</template>

<script setup lang="ts">
const props = withDefaults(defineProps<{
  src?: string
  big?: boolean
  errorImage?: string
}>(), {
  src: '',
  big: false,
  errorImage: '/no-avatar.png',
})

const onErrorLoadImage = computed(() => `this.src='${props.errorImage}';this.onerror='';`)
</script>

还有我的测试

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import UiAvatar from './Avatar.vue'

const componentName = 'img'
const src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII='
const big = true
const errorImage = '/no-avatar.png'

describe('UiAvatar', () => {
  it('should be render the component', () => {
    const wrapper = mount(UiAvatar, {
      propsData: {
        src,
        big,
        errorImage
      }
    })
    expect(wrapper.element.tagName).toBe(componentName)
  })
})

谢谢:)

Answer 1

这可以通过使用以下npm包来解决:unplugin components/vite unplugin-auto/vite

他们只需要指定一个生成导入文件的路径，在我的例子中，我使用一个故事书文件夹，因为我也在那里使用插件，但它可以是任何其他路径。

vitest.config.ts