Vitest: Cannot read properties of undefined (reading 'define

Hi! If i'm not wrong, you will have to mock our package in your testing component and use some testing environment that will help you emulate browser environment.

You can read more about mocking third-party-libraries here: https://vitest.dev/guide/mocking.html#modules

and about testing environments here: https://vitest.dev/guide/environment.html

I have tried some of that and came up with an example:

// @vitest-environment happy-dom

import { expect, test, vi } from "vitest";
import { mount, VueWrapper } from "@vue/test-utils";
import BaseWarning from "../src/App.vue";

vi.mock("mdb-vue-ui-kit", () => ({
  defineComponent: vi.fn(),
  MDBBtn: vi.fn(),
  MDBAlert: {
    props: {
      "v-model": Boolean,
      color: String,
      // other props
    },
    template: "<slot></slot>",
  },
}));

test("mount BaseWarning", async () => {
  expect(BaseWarning).toBeTruthy();

  const wrapper: VueWrapper<any> = mount(BaseWarning, {
    props: {
      warningText: "test",
    },
  });
  console.log("wrapper:", wrapper.text());
  expect(wrapper.text()).toContain("test");
});

I have created a mock component, with template inside Alert that will receive the slot value (because thats where I used the warningText prop in my vue component), so that the test value will be present in a wrapper content. I used simple mock for MDBBtn because it wasn't necessary to add anything more in my example.

I hope that will be helpful! Best Regards!