CODEWITHSUNDEEP
typescriptvue.jsjestjsvuetify.jsvue-test-utils
DJ256
DJ256

Reputation: 101

Vuetify 3 with vue-test-utils cannot load vuetify in jest

I'm trying to make UI tests on a Vue app using TypeScript and Vuetify 3. I've installed vue-test-utils 2 and wrote an example test but I can't get jest to import vuetify in the test.

jest.config.js:

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

my example test:

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"
            }
        },
    }
)

I get the following error when launching the test: Cannot find module 'vuetify/styles' from 'src/plugins/vuetify.ts'

Upvotes: 2

Views: 792

Answers (1)

Hakan Yildizhan
Hakan Yildizhan

Reputation: 182

Chances are you have "noUncheckedSideEffectImports": true in your tsconfig.*.json file(s).

In JavaScript it’s possible to import a module without actually importing any values from it.

import "some-module";

These imports are often called side effect imports because the only useful behavior they can provide is by executing some side effect (like registering a global variable, or adding a polyfill to a prototype).

By default, TypeScript will not check these imports for validity.

Source: typescriptlang.org

Taking it out should get rid of the error.

Upvotes: 0

Related Questions