How to test components that depend on the (internal) layout composable? #18076
Replies: 4 comments 3 replies
-
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? |
Beta Was this translation helpful? Give feedback.
-
@backfromexile
If you provide more context, I will be able to find final solution more easily. |
Beta Was this translation helpful? Give feedback.
-
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),
}
})
)}
)} |
Beta Was this translation helpful? Give feedback.
-
Components like VMain, VNavigationDrawer, VBottomNavigation, VAppBar and VLayoutItem are asynchronous, so the v-app waits for them to render. await new Promise((res) => {
setTimeout(() => res(''), 1)
}) I created a problem, maybe there will be some more detailed information #19895 |
Beta Was this translation helpful? Give feedback.
-
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.Beta Was this translation helpful? Give feedback.
All reactions