Setting up unit-test for Vue project with Typescript failed with TypeError: Cannot destructure property `polyfills` of 'undefined' or 'null'

I am trying to add unit test for an existing Vue project with Typescript. I followed the instruction on vue-test-utils for typescript(https://vue-test-utils.vuejs.org/zh/guides/using-with-typescript.html). However, when I run the test , I got the following error:
TypeError: Cannot destructure property 'polyfills' of 'undefined' or 'null'. While processing preset:

What I have tried: I tried to reinstall the dependencies of babel such as babel-core. Re-examined the configurations. Not working.

I tried to remove the mounting of the component and the error went away. It seems there are some problems with mounting the component.

Here is the small sample code I tried:

//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)
  })
})

I am little confused about the error stack there. Is there anything wrong I could fix it?