Vue 3 + Vuetify 3 + vue/test-utils 的组合，导致“无法找到注入的 Vuetify 布局”错误

Question

有谁知道如何@vue/test-utils v2在使用Vuetify 3 Beta版本时在库中进行组件测试？我也用它Vue3 composition API来定义我的组件。我在这里找到的文档https://vuetifyjs.com/en/getting-started/unit-testing/#spec-tests不起作用，因为它适用于Vuetify v2和@vue/test-utils v1

这是我的plugins/vuetify.js

import '@mdi/font/css/materialdesignicons.css';
import 'vuetify/styles';
import { createVuetify } from 'vuetify';

export default createVuetify();

这是我在 NavBar.spec.js 中的代码

import { mount } from '@vue/test-utils';
import NavBar from '../NavBar.vue';
import Vuetify from '../../plugins/vuetify';

describe('NavBar', () => {
    it('No properties [correct]', () => {
        mount(NavBar, {
            props: {},
            global: {
                plugins: [Vuetify]
            }
        });
        // check if navbar renders
        cy.get('.main')
            .first();

    });
});

这是我收到的错误： Could not find injected Vuetify layout

Answer 1

我遇到了同样的问题，有人回答了类似的问题，说他们通过在标签内移动组件来修复错误<v-app>。

如果像我一样，您的组件已经在您的顶级标签内，那么在线<v-app>其他人通过添加成功了

let el = document.createElement("div");
el.setAttribute("data-app", "true");
document.body.appendChild(el);

在您的测试之前，但这也不适用于我的设置。

（我发现将我的组件包装在<v-app>标签中可以让我的测试正常工作，但是您的页面上不应该有多个组件，并且您不想为了让测试通过而向每个组件添加额外的代码。）

如果该解决方案也不适合您，我最终会通过安装VApp组件本身并将我的组件作为默认插槽内容传递给它来解决它，如下所示：

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),
      }
    })
  )}
)}

（感谢此 GitHub 线程的协助）

希望这只是一个问题，因为 Vuetify 3 仍处于测试阶段，一旦他们正式确定最佳测试实践，我们应该能够删除这个自定义修复。

希望这可以帮助！