vue-test-utils setup getting TypeError: Cannot create property '_Ctor' on string

vue-test-utils setup getting TypeError: Cannot create property '_Ctor' on string

我一直在关注 this guide and this guide 使用 vue-test-utils 和 vue 2 在 Rails 5.1 和 webpacker 上设置玩笑测试。我能够 运行 没有 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 语句并尝试 mount/shallow 组件之前,Jest 正在处理一个简单的 expect(1 + 1).toBe(2); 断言。

我还需要什么吗?第一次用这么多工具,多谢指点!

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

所以,改变:

let wrapper = shallow('PostAddress');

进入:

let wrapper = shallow(PostAddress);


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

shallow(component {, options}])

Arguments:

  • {Component} component
  • {Object} options