vue-test-utils 设置获取 TypeError：无法在字符串上创建属性“_Ctor”

Posted 2023-02-22

【中文标题】vue-test-utils 设置获取 TypeError：无法在字符串上创建属性“_Ctor”

【英文标题】：vue-test-utils setup getting TypeError: Cannot create property '_Ctor' on string

【发布时间】：2018-08-29 14:43:15

【问题描述】：

我一直在关注 this guide 和 this guide，在带有 webpacker 的 Rails 5.1 上使用 vue-test-utils 和 vue 2 设置玩笑测试。我可以在没有 vue 组件的情况下运行基本测试，但尝试挂载 vue 组件会导致错误：

   TypeError: Cannot create property '_Ctor' on string 'PostAddress'

       7 |
       8 |   it('mounts', () => 
    >  9 |     let wrapper = shallow('PostAddress');
      10 |
      11 |     expect(1 + 1).toBe(2);
      12 |   );

      at Function.Vue.extend (node_modules/vue/dist/vue.runtime.common.js:4785:67)
      at createConstructor (node_modules/@vue/test-utils/dist/vue-test-utils.js:4562:25)
      at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:4654:12)
      at shallow (node_modules/@vue/test-utils/dist/vue-test-utils.js:4691:10)
      at Object.<anonymous> (spec/javascript/PostAddress.spec.js:9:19)

我的测试文件PostAddress.test.js 看起来像：

import  mount  from '@vue/test-utils'  // mounts with children
import  shallow  from '@vue/test-utils' // mounts without children

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


describe('PostAddress', () => 
  it('mounts', () => 
    let wrapper = shallow('PostAddress');

    expect(1 + 1).toBe(2);
  );
);

package.json的相关部分：

  "devDependencies": 
    "@vue/test-utils": "^1.0.0-beta.12",
    "babel-jest": "^23.0.0-alpha.0",
    "babel-preset-es2015": "^6.24.1",
    "jest": "^22.4.2",
    "vue-jest": "^2.2.1",
    "webpack-dev-server": "2.11.2"
  ,
  "jest": 
    "roots": [
      "spec/javascript"
    ],
    "moduleDirectories": [
      "node_modules",
      "app/javascript"
    ],
    "transform": 
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
    ,
  

组件本身在浏览器中运行良好（而且很简单）。在我添加 let 语句并尝试挂载/浅化组件之前，Jest 正在使用一个简单的 expect(1 + 1).toBe(2); 断言。

还有什么我需要的吗？第一次使用很多这些工具，所以感谢任何指点！

【参考方案1】：

Shallow 将组件对象作为第一个参数，而不是字符串名称。

所以，改变：

let wrapper = shallow('PostAddress');

进入：

let wrapper = shallow(PostAddress);

来自官方文档的参考：https://vue-test-utils.vuejs.org/en/api/shallow.html:

shallow(component , options])

参数：

Component组件 Object 选项

【讨论】：

好吧，我觉得很谦虚。我应该马上看到的。谢谢acdcjunior！