Jest 单元测试报错：'Invalid prop: type check failed for prop \'currentImg\'. Expected String, got Object'

<h2>Jest 单元测试报错：'Invalid prop: type check failed for prop 'currentImg'. Expected String, got Object'</h2>
<p>如果你在使用 Jest 对 Vue 组件进行单元测试时遇到以下报错信息：</p>
<p>console.error node_modules/vue/dist/vue.runtime.common.dev.js:4548      [Vue warn]: Invalid prop: type check failed for prop 'currentImg'. Expected String, got Object</p>
<p>这是因为你传入的 <code>currentImg</code> 属性类型与组件预期的类型不符。根据报错信息，组件期望接收一个字符串类型的 <code>currentImg</code> 属性，而你传入的是一个对象。</p>
<h3>解决方法</h3>
<p>要解决这个问题，你需要在测试代码中确保为 <code>currentImg</code> 属性传入字符串类型的值。</p>
<p>以下是一个示例，假设你有一个名为 <code>MyComponent</code> 的组件，它接受一个名为 <code>currentImg</code> 的字符串类型属性：javascript// MyComponent.vue<template>  <img :src='currentImg' alt='Current Image'></template></p>
<script>export default {  props: {    currentImg: {      type: String,      required: true    }  }}</script>
<p>在你的 Jest 测试代码中，你可以这样传入字符串类型的 <code>currentImg</code> 属性：javascript// MyComponent.test.jsimport { shallowMount } from '@vue/test-utils'import MyComponent from '@/components/MyComponent.vue'</p>
<p>describe('MyComponent', () =&gt; {  it('renders correctly with currentImg prop', () =&gt; {    const currentImg = 'image.jpg' // 确保传入字符串    const wrapper = shallowMount(MyComponent, {      propsData: {        currentImg: currentImg      }    })</p>
<pre><code>// 进行断言和其他测试    expect(wrapper.find('img').attributes('src')).toBe('image.jpg')   })})
</code></pre>
<p>通过将 <code>currentImg</code> 属性设置为字符串类型，你就可以解决 Jest 单元测试中的这个报错信息了。</p>
<p><strong>记住：</strong> 在编写 Vue 组件和测试代码时，始终要注意属性的类型，并在测试中提供符合预期的类型，以避免类似的错误。</p>