在Rails5.1+Webpacker环境中用vue-test-utils测试Vue组件遇类型错误

嘿，这个问题我之前配置Rails+Vue+Jest的时候也踩过坑！你碰到的TypeError: Cannot create property '_Ctor' on string 'PostAddress'错误，原因其实很直接——你给shallow方法传了组件名称的字符串，但它需要的是实际的Vue组件对象。

问题根源 #

vue-test-utils的shallow（或者mount）方法是用来创建Vue组件实例并挂载的，它必须接收一个合法的Vue组件定义对象。如果你传入字符串'PostAddress'，Vue会把它当成普通的HTML标签去处理，这显然不是你要的组件，所以就抛出了这个奇怪的错误。

修复步骤 #

1. 正确导入你的PostAddress组件
   在测试文件的顶部，先把组件文件导入进来，路径要根据你项目的实际结构调整（比如Webpacker下Vue组件通常放在app/javascript/components/目录）：

   import PostAddress from '../components/PostAddress.vue'
   

2. 修改测试代码，传入组件对象
   把原来的shallow('PostAddress')改成直接传入导入的组件对象：

   it('mounts', () => { 
     let wrapper = shallow(PostAddress); 
   
     expect(1 + 1).toBe(2);
     // 你还可以加组件相关的断言，比如检查组件是否存在
     expect(wrapper.exists()).toBe(true);
   }); 
   

完整测试示例 #

给你一个更规范的测试代码参考：

import { shallowMount } from '@vue/test-utils'
import PostAddress from '../components/PostAddress.vue'

describe('PostAddress Component', () => {
  it('should mount successfully', () => {
    const wrapper = shallowMount(PostAddress)
    expect(wrapper.isVueInstance()).toBeTruthy()
  })
})

这样调整之后，应该就能正常挂载组件并运行测试了！

内容的提问来源于stack exchange，提问作者tgf