带有 vue-test-utils 的 Vuetify 3 无法在玩笑中加载 vuetify

Question

我正在尝试使用 TypeScript 和 Vuetify 3 在 Vue 应用程序上进行 UI 测试。我已经安装了 vue-test-utils 2 并编写了一个示例测试，但我无法在测试中导入 vuetify。

jest.config.js:

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
}

我的示例测试：

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

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')
    expect(filterTextField.element.nodeValue).toBe('some text')
  })
})

src/plugins/vuetify.ts:

import "vuetify/styles"
import { createVuetify } from "vuetify"
export default createVuetify({
        defaults: {
            global: {
                hideDetails: true
            },
            VSwitch: {
                color: "primary"
            },
            VTextField: {
                variant: "outlined"
            }
        },
    }
)

启动测试时出现以下错误：

Cannot find module 'vuetify/styles' from 'src/plugins/vuetify.ts'

Answer 1

您的

"noUncheckedSideEffectImports": true

文件中可能有

tsconfig.app.json

。

在 JavaScript 中，可以导入模块而不实际从中导入任何值。

import "some-module";

这些导入通常称为副作用导入，因为它们可以提供的唯一有用的行为是执行一些副作用（例如注册全局变量，或向原型添加填充）。

默认情况下，TypeScript 不会检查这些导入的有效性。

来源：typescriptlang.org

将其取出应该可以消除错误。