How to test components that depend on the (internal) layout composable?

[backfromexile]

For any Vue component I want to unit test that uses any Vuetify component which itself depends on the layout composable (these components are VMain, VFooter, VNavigationDrawer, VBottomNavigation, VSystemBar, VAppBar, VLayoutItem), I get the error Error: Could not find injected Vuetify layout when mounting the component isolated.

How are we supposed to test our components? Of course I could wrap the component in a VApp or VLayout for the test, but for example vue-test-utils has no proper way to do that (afaik only cypress does), and also it kind of defeats the point of isolated testing.

[KentuckyMC]

Seems like i'm struggling with the same issue. That I get this error on a 'app-bar' component? Anyone have an answer for this issue? @backfromexile you already have a solution?

[backfromexile]

Unfortunately we haven't found a solution for this, but luckily only a few non-critical components are affected, so we decided to ditch the tests for these until there is a solution.

[nickmadev]

@backfromexile
Did you try to use @vue/test-utils?
By using @vue/test-utils, you can test by wrapping with v-app.

import Vue from 'vue';
import VMain from 'vuetify/components/VMain';
import { mount } from '@vue/test-utils';

const wrapper = mount(VMain, {
  propsData: {
    appContent: 'VMain Tester',
  },
  template: `
    <v-app>
      <VMain />
    </v-app>
  `,
});

If you provide more context, I will be able to find final solution more easily.

[backfromexile]

Hi there, there is no template property/option for mount as far as I can see in the documentation, so this doesn't seem to be an option. But just to make 100% sure I'll check tomorrow on my work computer, but if it is available it doesn't seem to be documented?

If you are thinking about the way shown in the second code block here, this is also not an option for us because of various things like losing type information and having to re-bind props (unless we missed something).

[backfromexile]

I just checked and your example is not an option and also does not work even if undocumented.

[jampinha]

Hello, this is the solution for now

import { h } from "vue";
import { VApp } from "vuetify/components";
import MyComponent from "./MyComponent.vue";

describe("Test", () => {
  it("should", () => {
    const wrapper = mount(VApp, {
      slots: {
        default: h(MyComponent),
      }
    })
  )}
)}

[Yamadetta]

Components like VMain, VNavigationDrawer, VBottomNavigation, VAppBar and VLayoutItem are asynchronous, so the v-app waits for them to render.
In this case, it is fixed as follows before the first expect.

     await new Promise((res) => {
       setTimeout(() => res(''), 1)
     })

I created a problem, maybe there will be some more detailed information #19895

[falko-apheris]

Here is a full Nuxt example of a unit test that worked for me. I provide this since I needed a longer timeout to make it work and it took me a bit to assemble the information provided by different answers here.

import { mountSuspended } from '@nuxt/test-utils/runtime';
import { VApp } from 'vuetify/components';

describe('v-navigation-drawer', () => {
	it('renders the test component', async () => {
		const wrapper = await mountSuspended(VApp, {
			slots: {
				default: {template: `<v-navigation-drawer
			v-model="showMenu"
			temporary
			location="right"
			color="rgba(75, 84, 86, 0.5)"
		>
			some content
		</v-navigation-drawer>`},
			},
		});
		await new Promise((resolve) => {
			setTimeout(() => resolve(''), 500);
		});
		expect(wrapper.html()).toMatchInlineSnapshot(`
			"<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
			  <div class="v-application__wrap">
			    <v-navigation-drawer temporary="" location="right" color="rgba(75, 84, 86, 0.5)"> some content </v-navigation-drawer>
			  </div>
			</div>"
		`);
	});
});

[falko-apheris]

In your unit test you can replace default: {template: '...'} with your component e.g. default: MyNavigation,

[lucie1704]

Hello, I get the same error in my unit tests "Could not find injected layout"
Is there any updates on this subject or are we stuck to not being able to test our components that depend on v-layout ?

[Mvii7]

Where 'YourComponent' uses 'v-navigation-drawer':

import { mount } from "@vue/test-utils";
import { createVuetify } from "vuetify";
import YourComponent from "@/components/YourComponent.vue";
import {
  VNavigationDrawer,
  VApp,
} from "vuetify/components";

const Component = {
  template: "<v-app><YourComponent></YourComponent></v-app>",
};

global.ResizeObserver = vi.fn().mockImplementation(() => ({
  observe: vi.fn(),
  unobserve: vi.fn(),
  disconnect: vi.fn(),
}));

describe("YourComponent", async () => {
  const wrapper = mount(Component, {
    global: {
      plugins: [createVuetify()],
      components: {
        "v-app": VApp,
        "v-navigation-drawer": VNavigationDrawer,
        YourComponent: YourComponent,
      },
    },
  });
});