Cannot unit-test my wrapper component for Vuetify's v-color-picker

So I’m just getting started with vue-test-utils, and I have a simple wrapper component that in turn utilizes Vuetify’s VColorPicker component in a VMenu, the component’s job is to simply render the selected color on the activator button and emits the newly selected color upon color input, it works fine but I’m having a hard time implementing a unit-test for it.

Here’s the code:

AppColorPicker.vue

<template>
  <v-menu
    ref="menu"
    v-model="menu"
    :close-on-content-click="false"
    transition="scale-transition"
    offset-y
    nudge-bottom="20"
  >
    <template #activator="{ on, attrs }">
      <div v-bind="attrs" v-on="on">
        <slot>
          <v-btn>Pick Color</v-btn>
        </slot>
      </div>
    </template>
    <v-card>
      <v-color-picker
        v-bind="$attrs"
        mode="hexa"
        hide-mode-switch
        flat
        ref="color-picker"
        :value="color"
        @input="onColorPick"
      />
      <v-card-actions class="d-flex justify-end">
        <v-btn class="ma-3 mt-0" depressed color="accent" @click="menu = false">
          Ok
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-menu>
</template>

<script>
export default {
  name: "AppColorPicker",

  props: {
    color: {
      type: String,
      required: true
    }
  },

  data() {
    return {
      menu: false
    };
  },

  methods: {
    onColorPick(color) {
      this.$emit("color-pick", color);
    }
  }
};
</script>

AppColorPicker.spec.js

import AppColorPicker from "@/components/AppColorPicker";
import { shallowMount } from "@vue/test-utils";

describe("AppColorPicker", () => {
  it("Renders the currently selected color and emits the value of the newly selected color", () => {
    const initialColor = "#ffffffff";

    const wrapper = shallowMount(AppColorPicker, {
      propsData: { color: initialColor }
    });

    wrapper.setData({ menu: true });
    /* upon opening the menu, the internal v-color-picker component is
    expected to emit the currently selected color, which I listen to
    via the "input" event and emit it from the wrapper myself */

    expect(wrapper.emitted()["color-pick"]).toHaveLength(1);
  });
});

I also added a setup.js that’s included in the npm run command

import Vue from "vue";
import Vuetify from "vuetify";

Vue.use(Vuetify);

Vue.config.productionTip = false;

When the test runs I get the following:

  ● AppColorPicker › Renders the currently selected color and emits the value of the newly selected color

    expect(received).toHaveLength(expected)

    Matcher error: received value must have a length property whose value must be a number

    Received has value: undefined

      15 |     via the "input" event and emit it from the wrapper myself */
      16 | 
    > 17 |     expect(wrapper.emitted()["color-pick"]).toHaveLength(1);
         |                                             ^
      18 |   });
      19 | });
      20 | 

      at Object.<anonymous> (tests/unit/AppColorPicker.spec.js:17:45)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        1.805s

What am I missing?

So after much researching and brute-force coding I was able to achieve what I needed but in a more complicated way, because I learned that testing Vuetify components can be a bit tricky, so I’ll post my solution here in case someone encounters similar problem in the future:

Turns out it’s not as simple as importing and Vue.use(Vuetify)ing in the setupt file:

tests/unit/AppColorPicker.spec.js

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

const localVue = createLocalVue();

describe("AppColorPicker", () => {
  let vuetify;

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

  it("Renders selected color and emits the value of the newly selected color", () => {
    const initialColor = "#ffffffff";
    const wrapper = mount(AppColorPicker, {
      localVue,
      vuetify,
      propsData: { color: initialColor },
      data: () => ({ menu: true })
    });

    const emittedColor = i => wrapper.emitted("color-pick")[i][0];

    expect(emittedColor(0)).toEqual(initialColor.toUpperCase());
    // initial color emission

    const pickedColor = "#505666FF";
    const colorPicker = wrapper.findComponent({ name: "VColorPicker" });
    colorPicker.vm.$emit("input", pickedColor);
    //emulating color picking
    expect(emittedColor(1)).toEqual(pickedColor);
  });
});

Also turns out that Vuetify’s <v-color-picker> is one of the components that need a wrapping <v-app> (which I think that doesn’t have to be a direct parent), so instead of making a wrapper component in every test file, I was able to to this for every test by modifying the setup file like the following:

tests/setup.js

import Vue from "vue";
import Vuetify from "vuetify";

Vue.use(Vuetify);

Vue.config.productionTip = false;

HTMLCanvasElement.prototype.getContext = () => {
  const App = document.createElement("div");
  App.setAttribute("data-app", true);
  document.body.appendChild(App);
};

I hope that this will help someone one day because I spent so much time figuring it out.
I’d also like to know if there’s a better way to achieve this.