Jest 不使用“vue-test-utils”在 Vue 2.7 + TS + Vuetify 上安装合成 API 组件

Question

我正在尝试对composition-api 组件运行单元测试。我使用的是带有 TS 的 Vue 2.7 和以下软件包：

"nuxt": "^2.15.8",
"@nuxtjs/composition-api": "^0.33.1",
"@vue/test-utils": "^1.3.0",
"jest": "^28.1.3",

问题是组件安装时抛出以下错误：

    SyntaxError: Unexpected token (1:1141)

      at Parser.pp$4.raise (node_modules/vue-template-es2015-compiler/buble.js:2757:13)
      at Parser.pp.unexpected (node_modules/vue-template-es2015-compiler/buble.js:647:8)
      at Parser.pp$3.parseExprAtom (node_modules/vue-template-es2015-compiler/buble.js:2196:10)
      at Parser.<anonymous> (node_modules/vue-template-es2015-compiler/buble.js:6003:24)
      at Parser.parseExprAtom (node_modules/vue-template-es2015-compiler/buble.js:6129:31)
      at Parser.pp$3.parseExprSubscripts (node_modules/vue-template-es2015-compiler/buble.js:2047:19)
      at Parser.pp$3.parseMaybeUnary (node_modules/vue-template-es2015-compiler/buble.js:2024:17)
      at Parser.pp$3.parseExprOps (node_modules/vue-template-es2015-compiler/buble.js:1966:19)
      at Parser.pp$3.parseMaybeConditional (node_modules/vue-template-es2015-compiler/buble.js:1949:19)
      at Parser.pp$3.parseMaybeAssign (node_modules/vue-template-es2015-compiler/buble.js:1925:19)

测试示例：

import { mount, createLocalVue } from '@vue/test-utils';
import CompositionApi from '@nuxtjs/composition-api';
import CustomSelect from '@/components/shared/CustomSelect';
import Vuetify from 'vuetify';

const localVue = createLocalVue();
localVue.use(CompositionApi);

let vuetify;

beforeEach(() => {
  jest.clearAllMocks();
  vuetify = new Vuetify();
});

describe('test select component', () => {
  test('Mounts correclty', () => {
    const wrapper = mount(CustomSelect, {
      localVue,
      vuetify,
    });

    expect(wrapper.vm).toBeTruthy();
  });
});

配置：

// jest.config.js

module.exports = {
  globalSetup: '<rootDir>/jest.setup.js',
  setupFiles: ['<rootDir>/tests/jest.init.js'],
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js',
    '^@nuxtjs/composition-api$':
      '@nuxtjs/composition-api/dist/runtime/index.js',
  },
  moduleFileExtensions: ['js', 'vue', 'json'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest',
    '^.+\\.ts?$': 'ts-jest',
    '.+\\.(css|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
  },
  transformIgnorePatterns: [
    '<rootDir>/node_modules/(?!(@nuxtjs/composition-api)/)',
  ],
  snapshotSerializers: ['jest-serializer-vue'],
  testMatch: ['<rootDir>/tests/unit/**/*.spec.js'],
};

包.json

{
.....
"test": "jest",
"test:watch": "jest --watch",
.....
},
"engines": {
"npm": "8.11",
"node": "16.16"
},
"dependencies": {
.....
"@babel/eslint-parser": "^7.18.9",
"@nuxt/types": "^2.15.8",
"@nuxt/typescript-build": "^2.1.0",
"@nuxtjs/composition-api": "^0.33.1",
"@nuxtjs/vuetify": "^1.12.3",
"@vueuse/core": "^9.3.1",
"flush-promises": "^1.0.2",
"jest-environment-jsdom": "^28.1.3",
"jest-mock-axios": "^4.7.0-beta",
"nuxt": "^2.15.8",
.....
},
"devDependencies": {
.....
"@babel/core": "^7.19.1",
"@babel/preset-env": "^7.19.1",
"@faker-js/faker": "^7.6.0",
"@vue/server-test-utils": "^1.3.0",
"@vue/test-utils": "^1.3.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^28.1.3",
"eslint": "^8.20.0",
"jest": "^28.1.3",
"jest-cli": "^28.1.3",
"jest-serializer-vue": "^2.0.2",
"jest-transform-stub": "^2.0.0",
"mockdate": "^3.0.2",
"vue-jest": "^3.0.7"
.....
}
}

我已经尝试了 Jest 文档中的所有建议，包括：指定“transformIgnorePatterns”、指定“moduleNameMapper”、启用“ECMAScript Modules”，但它没有帮助。

在 Vue 2.7 + Nuxt + Vuetify 上测试组合 API 组件的工作设置应该是什么？