Vue-test-utils+Jest测试Vuetify3项目时无法加载Vuetify模块

问题场景 #

使用TypeScript + Vuetify3开发Vue应用，配置vue-test-utils 2编写测试后，运行Jest时出现报错：Cannot find module 'vuetify/styles' from 'src/plugins/vuetify.ts'。

解决方案 #

方案1：Mock样式文件 #

Jest默认无法处理非JavaScript模块的导入，可通过Mock样式文件绕过该问题：

1. 在项目根目录创建__mocks__/styleMock.js文件，内容如下：

module.exports = {};

2. 修改jest.config.js，添加moduleNameMapper配置：

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
  moduleNameMapper: {
    'vuetify/styles': '<rootDir>/__mocks__/styleMock.js',
    '\\.(css|scss|sass)$': '<rootDir>/__mocks__/styleMock.js'
  }
}

方案2：使用jest-transform-stub处理样式 #

安装专门处理样式的转换工具：

npm install jest-transform-stub --save-dev

修改jest.config.js的transform配置：

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
  transform: {
    '^.+\\.(css|scss|sass)$': 'jest-transform-stub'
  }
}

方案3：在测试中创建独立的Vuetify实例 #

避免直接导入项目中依赖样式的Vuetify实例，在测试里创建极简的Vuetify实例：
修改测试文件：

import { mount } from "@vue/test-utils"
import { createTestingPinia } from "@pinia/testing"
import ProfileList from "@/components/ProfileList.vue"
import { createVuetify } from 'vuetify'

// 创建测试专用的Vuetify实例，无需导入样式
const vuetify = createVuetify()

describe("ProfileList.vue",  () => {
  it("Example test",  async () => {
    const wrapper = mount(ProfileList, {
      global: {
        plugins: [createTestingPinia(), vuetify]
      }
    })
    const filterTextField = wrapper.find('#filter-text-field').get('input')
    await filterTextField.setValue('some text')
    // 注意：input的内容应通过element.value获取，而非nodeValue
    expect(filterTextField.element.value).toBe('some text')
  })
})

额外提示 #

原测试代码中的断言存在错误：filterTextField.element.nodeValue无法正确获取input的输入值，应改为filterTextField.element.value，因为input元素的用户输入内容存储在value属性中。

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