如何使用vue3 composition API在函数上使用vi.spyOn

8e2ybdfx  于 2023-04-21  发布在  Vue.js
关注(0)|答案(1)|浏览(277)

我正在使用TypeScript和vue 3 composition API。
我在一个组件(在uploadFile.vue中)中有一个函数,我想使用Vitest进行(单元)测试:

<template>
    <div style="display: none">
      <input
        ref="input"
        type="file"
        @change="addNewImage($event)"
      />
    </div>
</template>

const addNewImage = async (event: Event): Promise<void> => {
...
}

在我的uploadFile.spec.ts中,我这样做:

import { afterEach, describe, it, expect, vi, beforeEach } from 'vitest'
import { mount, shallowMount, VueWrapper } from '@vue/test-utils'
import UploadFile from './UploadFile.vue'

describe('UploadFile', () => {

  it('renders the component', () => {
    const addImageSpy = vi.spyOn(UploadFile, 'addNewImage')
    const wrapper = shallowMount(UploadFile, {
      ...
    }
    const input = wrapper.find('input[type="file"]');
    await input.trigger('change')
    await wrapper.vm.$nextTick();
    expect(addImageSpy).toHaveBeenCalled();
  })

然而,我的终端显示错误:“addNewImage不存在”(当指向vi.spyOn(fileUpload,“addImage”)时)。
我做错了什么?

kb5ga3dv

kb5ga3dv1#

组件定义没有addImageSpy成员。wrapper.vm有:

const wrapper = shallowMount(UploadFile, {
  //...
}
const addImageSpy = vi.spyOn(wrapper.vm, 'addNewImage')
//...

相关问题