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

最新推荐文章于 2025-04-30 10:36:39 发布

原创最新推荐文章于 2025-04-30 10:36:39 发布 · 5.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

开发DEMO 同时被 3 个专栏收录

315 篇文章

订阅专栏

28 篇文章

订阅专栏

Jest

6 篇文章

订阅专栏

使用 Jest 进行 Vue 组件单元测试时，若遇到相关错误，可能是 Jest 不识别特定写法。解决办法是在 Jest 配置文件添加配置项，设置相关选项。使用特定写法需 Vue 3.x 及以上版本，Vue 2.x 要用特定标签。Vue CLI 创建的项目已默认配置好。

如果你在使用 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，无需再进行额外的配置。