Question

TypeError：对象原型可能只是一个Object或null：undefined

我的项目中出现了一些错误。我正在使用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>

Here is error logs with picture.

Answer 1

您应该为esModuleInterop = true设置tsconfig.json或仅为tsconfig设置自己的jest

Answer 2

不

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

应该是

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

Answer 3

对我来说，使用来自＆＃34; vue＆＃34;的import * as Vue from "vue" instead of导入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

我通过从标记中删除lang =“ ts”来解决了问题

Answer 5

问题似乎在于Vue2如何暴露自身，因此import Vue from "vue"会导致此错误。

我通过使用“ vue-property-decorator”修复了该问题，

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

那么“ vue-property-decorator”会做什么？它导入然后导出Vue（不是默认值），而是命名为export。我想您可以根据需要在自己的代码中完成此操作。

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

Answer 6

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

链接： To Detect Circular Dependency in you package

尽管如此，我仍然收到错误消息。：（

Vue + typescript - TypeError：对象原型可能只是一个Object或null：undefined

6 个答案: