attachToDocument deprecated and no documented substitute?

[ghost]

Subject of the issue

attachToDocument was deprecated, in favor of attachTo, which is supposed to be more flexible, by allowing any css selector as the mount point.

But what is the actual replacement for attachToDocument: true? attachTo: document.documentElement yields HierarchyRequestError: The operation would yield an incorrect node tree.

Seems like the functionality of attachToDocument was deprecated in favor of something that does not substitute it, but only provides complementary behaviour.

Note that, besides the hierarchy problem, attachTo should be acompanied by wrapper.destroy() at the end. The thing is that this DESTROYS THE NODE to which the wrapper was attached. So, I can attach the element to the body, but the body is going to be destroyed in the call.

What I'm currently doing is adding a dumb routine to each test suite that needs the wrapper to be attached to the dom:

    var node = document.createElement("div");
    node.setAttribute('id', 'app')
    document.body.appendChild(node);

    const wrapper = mount(List, {
      attachTo: '#app'
    }

    ...

    wrapper.destroy() 

Needless to say, unless I'm missing something, it would be way easier to not have attachToDocument deprecated.

[afontcu]

Hi! Thanks for filling this in.

attachTo does provide a substitute for attachToDocument. #1580 might help.

and AFAIK, attachToDocument also required you to call wrapper.destroy() at the end of the test to make sure a test wouldn't pollute the next one.

[ghost]

The alternative solution requires a lot of boilerplate code though. Creating a div, appending it to the body, then calling attachTo. Makes one miss the good old times of attachToDocument.

[ghost]

Also, the solution there leaves a warning, and one should still add:

    const app = document.createElement('div');
    app.setAttribute('data-app', true);
    document.body.append(app);

So the full boilerplate code for every test that uses, say, a dialog, is something like this:

    const elem = document.createElement('div')
    document.body.appendChild(elem)

    const app = document.createElement('div');
    app.setAttribute('data-app', true);
    document.body.append(app);

So the convenience of the old attachToDocument is still huge.

[afontcu]

Also, the solution there leaves a warning, and one should still add

I believe (haven't actually check!) that this is due to Vuetify, which requires a data-app attribute (or wrapping your component under testing with <v-app>).