Why does VIcon causing vue unit test to fail?

Viewed 30

I am writing unit test for vuetify components, most of the components are working fine but some components (checkbox, autocomplete, etc.) are failing to mount. I am getting this error: Cannot read properties of undefined (reading 'icons')

console.error node_modules/vue/dist/vue.runtime.common.dev.js:4516
    [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'icons')"
    
    found in
    
    ---> <VIcon>
           <DAutocomplete>
             <Root>

  console.error node_modules/vue/dist/vue.runtime.common.dev.js:2921
    TypeError: Cannot read properties of undefined (reading 'icons')
        at remapInternalIcon (/Users/c_aaqib.qadeer/Desktop/Nuxt/dda-design-system/node_modules/vuetify/src/util/helpers.ts:233:33)
        at VueComponent.getIcon (/Users/c_aaqib.qadeer/Desktop/Nuxt/dda-design-system/node_modules/vuetify/src/components/VIcon/VIcon.ts:72:14)
        at Proxy.render (/Users/c_aaqib.qadeer/Desktop/Nuxt/dda-design-system/node_modules/vuetify/src/components/VIcon/VIcon.ts:217:23)

This is code for the unit test

import { createLocalVue, mount } from "@vue/test-utils";
import Vuetify from "vuetify/lib";
import DAutocomplete from "@/components/DAutocomplete/DAutocomplete";
import { UserVuetifyPreset } from "vuetify";

describe("DAutocomplete.vue", () => {
  const localVue = createLocalVue();
  let vuetify: Vuetify;

  beforeEach(() => {
    vuetify = new Vuetify();
  });

  const mountFunction = (options: any = {}) => {
    return mount(DAutocomplete, {
      localVue,
      vuetify,
      ...options,
      propsData: {
        ...options?.propsData,
        "data-test": "d-autocomplete"
      },
      mocks: {
        $vuetify: {
          lang: {
            t: (val: string) => val
          },
        }
      }
    });
  };

  it("should check if autocomplete is rendered", () => {
    const autocomplete = mountFunction();
    expect(autocomplete.attributes()["data-test"]).toBe("d-autocomplete");
    expect(autocomplete.html()).toMatchSnapshot();
  });
});

DAutocomplete is just a wrapper over VAutocomplete. We are not modifying anything.

What am I doing wrong?

1 Answers
Related