Vue中的浅安装，存根不起作用

Posted 2023-03-08

【中文标题】Vue中的浅安装，存根不起作用

【英文标题】：Shallow mounting in Vue, stubs not working

【发布时间】：2020-09-04 02:38:58

【问题描述】：

我想为一个渲染子组件的 Vue 组件编写一个 Jest 测试。该组件如下所示：

<template>
  <div class="add-to-cart-position">
    <a :href="item.url">
      <picture-comp
        class="add-to-cart-position__image"
        :srcset-mobile="item.imageUrlMobile"
        :srcset-desktop="item.imageUrl"
      />
    </a>
  </div>
</template>

<script lang="ts">
  import Vue, Component, Prop from 'vue-property-decorator';
  import BasketItem from '../interfaces/BasketItem';
  import PictureComp from '../pictureComp/pictureComp.vue';

  @Component(
    name: 'add-to-cart-position',
    components: 
      PictureComp
    
  )
  export default class AddToCartPosition extends Vue 
    @Prop()
    item: BasketItem;
  
</script>

根据docs 我可以使用shallowMount 自动存根所有子组件，这正是我想要的。所以我的测试看起来像这样：

import shallowMount from '@vue/test-utils';
import AddToCartPosition from 'AddToCartPosition.vue';
import mockBasketItem from '/__mocks__/data/basketItem.mock';

describe('addToCartPosition', () => 
  const wrapper = shallowMount(AddToCartPosition, 
    propsData: 
      basketItem: mockBasketItem()
    
  );

  it('matches the snapshot', () => 
    expect(wrapper.html()).toMatchSnapshot();
  );
);

但是当我运行这个测试时，我得到一个错误并且错误在PictureComp 子组件中，它根本不应该被渲染。为什么自动存根不起作用？

我也尝试了mount 和手动存根，但它并没有改变任何东西。错误消息保持不变。

错误信息：

Test suite failed to run

TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)

  34 |       >
  35 |       <source
> 36 |         :srcset="srcLg"
     |            ^
  37 |         media="(min-width: 767px)"
  38 |       >
  39 |       <img

  at extendStatics (pictureComp/pictureComp.vue:36:12)
  at Object.<anonymous>.__extends (pictureComp/pictureComp.vue:40:5)
  at pictureComp/pictureComp.vue:62:1
  at pictureComp/pictureComp.vue:105:1
  at Object.<anonymous> (pictureComp/pictureComp.vue:137:3)
  at addToCartPosition/addToCartPosition.vue:70:1
  at Object.<anonymous> (addToCartPosition/addToCartPosition.vue:106:3)
  at Object.<anonymous> (test/components/addToCartPosition.test.ts:2:1)

【问题讨论】：

由于 pictureComp 渲染，该错误并不明显。由于您使用的是 shallowMount，我希望它不会。该错误可能发生在 pictureComp 导入时，并且 shallowMount 无能为力。请提供图片Comp.vue，因为它是相关的。

这是正确的。错误确实在子组件中 - 不是在渲染它时，而是在导入时。错误消息非常非常具有误导性。

很高兴您解决了这个问题。 extendStatics 和 setPrototypeOf 表明在定义类时会发生这种情况。有意义，因为您使用的是类组件。

【参考方案1】：

我花了很长时间才理解，但我最终明白了你对问题的 cmets 的意思。

对我来说，这是我需要set an environment variable，因为我的一个模块期望引用一个不存在的值。

在运行导入命令时会检查这一点，即使当您安装组件时，由于某种形式的测试替身，不需要导入。

【讨论】：

就我而言，这是一个关于 Vue、Jest 和 Typescript 的问题，如下所示：***.com/questions/48992278/… Jest 和 TS 不喜欢 Vue 默认导出。所有组件都需要一点额外的照顾。