typescript - 使用 Typescript 为 Vue 项目设置单元测试失败，出现 TypeError : Cannot destructure property `polyfills` of 'undefined' or 'null'

Question

我正在尝试使用 Typescript 为现有的 Vue 项目添加单元测试。我遵循了 vue-test-utils for typescript 的说明(https://vue-test-utils.vuejs.org/zh/guides/using-with-typescript.html)。但是，当我运行测试时，出现以下错误:
TypeError:无法解构“undefined”或“null”的属性“polyfills”。处理预设时:

我尝试过的:我尝试重新安装babel-core等babel的依赖。重新检查配置。不工作。

我试图移除组件的安装，错误消失了。安装组件似乎存在一些问题。

这是我试过的小示例代码:

//component
<template>
  <div>{{msg}}</div>
</template>

<script lang="ts">
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>


//spec.ts

import { shallowMount } from '@vue/test-utils'
import HelloWorld from '../HelloWorld.vue'

describe('HelloWorld.vue', () => {
  test('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    })
    expect(wrapper.text()).toMatch(msg)
  })
})

我对那里的错误堆栈有点困惑。有什么问题我可以解决吗？

Answer 1

我能够通过显式添加 babel-core@7.0.0-bridge.0 依赖项来解决这个问题(我的项目最初使用 babel-core@6.26.3) 并重新生成我的 node_modules 目录。

在按照相同的指南尝试将 Jest 添加到现有项目后，我最初看到了这个错误和 Plugin 0 specified in ... provided an invalid property of "default"。

在启用 TypeScript 和 Jest 的情况下从头开始创建一个新的 Vue 项目有助于了解需要更新版本的 Babel。另见 https://github.com/vuejs/vue-cli/issues/1131 .