Jest 不识别 ＜script lang=“ts“ setup＞ 解决方案

如果你在使用 Jest 进行 Vue 组件的单元测试时，遇到了 SyntaxError: Unexpected token '<' 或 Cannot find module './xxx.vue?vue&type=template&id=xxx' 等错误，那么可能是因为 Jest 不识别 <script lang="ts" setup> 的写法。

解决这个问题的方法是，在 Jest 的配置文件中添加 vue-jest 的配置项，将 scriptSetup 选项设置为 true。这样，Jest 就能够正确地识别 <script lang="ts" setup> 的写法了。

以下是一个示例的 Jest 配置文件：

// jest.config.js

module.exports = {
  // ...
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.tsx?$': 'ts-jest'
  },
  globals: {
    'vue-jest': {
      scriptSetup: true
    }
  }
};

在上面的配置文件中，我们使用 vue-jest 和 ts-jest 两个转换器来处理 Vue 和 TypeScript 文件。然后，在 globals 选项中，将 scriptSetup 选项设置为 true，以启用 <script lang="ts" setup> 的写法。

需要注意的是，使用 <script lang="ts" setup> 的写法需要使用 Vue 3.x 版本及以上的版本。如果你的项目中使用的是 Vue 2.x 版本，那么需要使用 <script> 标签来编写组件的逻辑代码。

另外，如果你使用的是 Vue CLI 创建的项目，那么已经默认配置好了 Jest 和 vue-jest，无需再进行额外的配置。