Provide options to adapt the document before mount

Describe the feature We are using Vuetify as component library in one of our projects. I would like to introduce vue-testing-library and came up with some setup troubles on the way. Vuetify requires a wrapper element containing the attribute data-app. This element is used to append components like dialog to the root DOM level. The required setup can be done using jest setup files. Thought, the dialog content can not be found when using the exposed queries of the vue-testing-libraries render() method.

To Reproduce Steps to reproduce the behavior:

• Init a vue app with vuetify
• Create a basic dialog
• write a test which should validate that the dialog content is visible when a button is clicked
• Add Vuetify and <div data-app></div> to your test DOM instance before mount

=> queries like getByText will not query the dialog content

I tried to create a codesandbox, but failed. Is there a working example for vue-testing-library? https://codesandbox.io/s/vuetify-with-vue-testing-library-bhu8f?previewwindow=tests

Expected behavior I expect a configuration option like it exists for react:

• baseElement: Specify the base element for the queries.
• container: Specify the surrounding DOM node

Related information:

• @testing-library/vue version: 3.0.0
• Vue version: 2.5.18
• node version: 8.12.0
• yarn version: 1.17.3
• Vuetify version: 1.2.10

Relevant code or config (if any)

import CreateLorem from "./CreateLorem";
import { render } from "@testing-library/vue";
import Vuetify from "vuetify";
import Vue from "vue";

var app = document.createElement("div");
app.setAttribute("data-app", true);
document.body.appendChild(app);
Vue.use(Vuetify);

it("should create a lorem", () => {
  const { getByText } = render(CreateLorem);
  getByText("open");
});

[bennettdams]

The example above works only for Vuetify components that don’t use the $vuetify instance property

(e. g. <v-menu> will always throw an undefined error in the test).

You can bypass this by using { vuetify: new Vuetify(), ...options },.

For any future readers, here is the complete setup:

Maybe interesting for the documentation/examples?

test-setup.js executed via Jest’s setupFiles in the jest.config.js

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

// We need to use a global Vue instance, otherwise Vuetify will complain about
// read-only attributes.
// More info: https://github.com/vuetifyjs/vuetify/issues/4068
//            https://vuetifyjs.com/en/getting-started/unit-testing
Vue.use(Vuetify);

test-helper.js used in the tests instead of VTL’s render

import { render as VTLRender } from "@testing-library/vue";
import Vuetify from "vuetify";

/**
 * Custom render wrapper to integrate Vuetify with Vue Testing Library.
 *
 * Vuetify requires you to wrap your app with a `v-app` component that provides
 * a `<div data-app="true">` node.
 *
 * More info:
 *    https://github.com/vuetifyjs/vuetify/issues/4068
 *    https://vuetifyjs.com/en/getting-started/unit-testing
 *
 * @param {*}           component Component from test to render
 * @param {*}           options Render options
 * @param {() => void}  callback Render callback
 * @return {*}          Render function of VTL including Vuetify `data-app`
 */
export const renderWithVuetify = (component, options, callback) => {
  return VTLRender(
    // anonymous component
    {
      // Vue's render function
      render(createElement) {
        // wrap the component with a <div data-app="true"> node and render the test component
        return createElement("div", { attrs: { "data-app": true } }, [
          createElement(component)
        ]);
      }
    },
    { vuetify: new Vuetify(), ...options },
    callback
  );
};

Actual component test

import { renderWithVuetify } from "../test-helper";
import MyComponent from "../../src/views/MyComponent.vue";

describe("MyComponent.vue", () => {
  test("Some test...", () => {
    const { getByText } = renderWithVuetify(MyComponent);

    expect(getByText(/some text/));
  });
});

[afontcu]

Hi! I can’t think of any downsides of the top of my head, as long as Vuetify issue with multiple Vue instances is still a thing (I guess it is!). This is something that should be fixed on their own, so I’d say having a comfortable workaround should do the trick 👍