Vue3项目中Jest导入Vuetify组件报错的解决方法问询

在Vue3项目中使用Vuetify组件编写Jest测试用例时，直接从node_modules导入VAlert组件会触发Cannot use import statement outside a module错误。以下是相关代码及错误日志：

测试文件 #

import { render } from '@testing-library/vue'
import VAlertCustom from '@/components/ui/alert/VAlertCustom.vue'
import { VAlert } from 'vuetify/lib/components/VAlert/VAlert.mjs'

describe('Alert', () => {
test('should render title, icon, and text', () => {
  const valuesAlert = {
    type: 'warn',
    text: 'Something is wrong'
  }

const { getByTestId } = render(VAlertCustom, {
  global: {
    components: {
      VCustomIcon: {
        template: '<div data-testid="v-custom-icon" />'
      },
      VAlert
    }
  },
  data() {
    return {
      isShow: true,
      valuesAlert
    }
  }
})

const title = getByTestId('alert-title')
const icon = getByTestId('v-custom-icon')
const text = getByTestId('alert-text')

expect(title).toHaveTextContent('Внимание!')
expect(icon).toBeInTheDocument()
expect(text).toHaveTextContent('Something is wrong')
})
})

jest.config.js #

module.exports = {
  moduleFileExtensions: ['js', 'json', 'vue', 'mjs'],
  testEnvironment: 'jsdom',
  testEnvironmentOptions: {
    customExportConditions: ['node', 'node-addons']
  },
  moduleNameMapper: {
    '^@root(.*)$': '<rootDir>/src$1',
    '^@components(.*)$': '<rootDir>/src/components$1'
  },
  moduleDirectories: ['node_modules', 'src'],
  transform: {
    '^.+\.js$': 'babel-jest',
    '^.+\.vue$': '@vue/vue3-jest'
  },
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect']
}

babel.config.js #

module.exports = {
  presets: [['@babel/preset-env']],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./'],
        alias: {
          '@': './src'
        }
      }
    ]
  ]
}

错误日志 #

frontend\node_modules\vuetify\lib\components\VAlert\VAlert.mjs:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { createVNode as _createVNode } from "vue";
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import { render } from '@testing-library/vue'
      2 | import VAlertCustom from '@/components/ui/alert/VAlertCustom.vue'
    > 3 | import { VAlert } from 'vuetify/lib/components/VAlert/VAlert.mjs'
        | ^

解决方案 #

1. 调整Jest配置，转译Vuetify的ES模块 #

Jest默认不会转译node_modules中的文件，但Vuetify组件以ES模块形式发布，需要让Babel处理这些文件。修改jest.config.js，添加transformIgnorePatterns配置：

module.exports = {
  // ... 原有配置
  transformIgnorePatterns: [
    '/node_modules/(?!vuetify)' // 让Jest转译Vuetify的文件
  ]
}

2. 正确注册Vuetify组件 #

不要直接导入.mjs格式的组件文件，而是通过Vuetify插件全局注册组件。修改测试文件：

import { render } from '@testing-library/vue'
import VAlertCustom from '@/components/ui/alert/VAlertCustom.vue'
import { createVuetify } from 'vuetify'
import { VAlert } from 'vuetify/components'

const vuetify = createVuetify({
  components: { VAlert }
})

describe('Alert', () => {
test('should render title, icon, and text', () => {
  const valuesAlert = {
    type: 'warn',
    text: 'Something is wrong'
  }

const { getByTestId } = render(VAlertCustom, {
  global: {
    plugins: [vuetify], // 全局注册Vuetify插件
    components: {
      VCustomIcon: {
        template: '<div data-testid="v-custom-icon" />'
      }
    }
  },
  data() {
    return {
      isShow: true,
      valuesAlert
    }
  }
})

const title = getByTestId('alert-title')
const icon = getByTestId('v-custom-icon')
const text = getByTestId('alert-text')

expect(title).toHaveTextContent('Внимание!')
expect(icon).toBeInTheDocument()
expect(text).toHaveTextContent('Something is wrong')
})
})

3. 优化Babel配置（可选） #

确保Babel适配Jest的Node环境，修改babel.config.js：

module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: {
        node: 'current' // 针对当前Node版本编译
      }
    }]
  ],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./'],
        alias: {
          '@': './src'
        }
      }
    ]
  ]
}

内容的提问来源于stack exchange，提问作者Sergienko Andrey