Vue + TypeError:对象原型可能只是一个对象或空:未定义

Question

TypeError：对象原型可能只是一个对象或空：未定义

我的项目中遇到了一些错误。 我正在使用vuejs，打字稿和jest。

这只是简单的代码，我试图用笑话进行单元测试，但它有一些错误。这是我的测试代码。

///<reference path="../../../../node_modules/@types/jest/index.d.ts"/>
// https://vue-test-utils.vuejs.org/kr/s
import { mount } from "vue-test-utils";
import HelloWorld from './HelloWorld.vue';
describe('[HelloWorld]', function () {
let cmp: any;
beforeEach(() => {
cmp = mount(HelloWorld);
});
it("Check vue instance", () => {
expect(cmp.isVueInstance()).toBeTruthy();
});
it("message is Hello", () => {
expect(cmp.vm.msg).toEqual('Hello!!');
});
});

和这里是 vue 文件

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<img src="/assets/logo.png">
<button @click="clickHandler">
button
</button>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
interface HelloWorldInterface {
msg: string;
clickHandler(): void;
}
@Component({})
export default class HelloWorld extends Vue implements HelloWorldInterface {
msg = "Hello!!";
clickHandler() {
window.alert(this.msg);
}
}
</script>

这是带图片的错误日志。

Answer 1

你应该为你的tsconfig.json或你自己的tsconfig设置esModuleInterop = true，只是为了jest

Answer 2

问题似乎是 Vue2 如何暴露自己，所以import Vue from "vue"会导致此错误。

我通过使用"vue-property-decorator"修复了它，如下所示：

import { Vue, Component, Prop } from 'vue-property-decorator';

那么"vue-property-decorator"是做什么的呢？它导入然后导出 Vue 不是默认的，而是命名的导出。我想如果你愿意，你可以在自己的代码中做到这一点。

import Vue, { PropOptions, WatchOptions } from 'vue';
...
export { Component, Vue, mixins as Mixins };

Answer 3

对我来说，使用import * as Vue from "vue"而不是import Vue from "vue"解决了具有类似设置的项目的问题，即：

//import Vue from "vue";
import * as Vue from "vue";
import Component from "vue-class-component";
interface HelloWorldInterface {
msg: string;
clickHandler(): void;
}
@Component
export default class HelloWorld extends Vue implements HelloWorldInterface {
msg = "Hello!!";
clickHandler() {
window.alert(this.msg);
}
}

它要麻烦得多，但至少它可以工作。我已经使用 vue-cli 设置了一个概念验证示例： https://codesandbox.io/s/mjvjw2xw39

Answer 4

not

it("message is Hello", () => {
expect(cmp.vm.msg).toEqual('Hello!!');
});

应该是

it("message is Hello", () => {
expect(cmp.msg).toEqual('Hello!!');
});

Answer 5

我通过从标签中删除lang="ts"解决了这个问题

Answer 6

查看下面的这个链接，它确实帮助我解决了命令的循环依赖问题npx madge --circular --extensions ts ./

链接： 检测包中的循环依赖关系

没错，我仍然收到错误..！！ :(