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
我一直在关注 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