Allow mount method to attach to specific HTML Element rather than generically attaching to the document

[jnields]

What problem does this feature solve?

This allows the developer to attach a component within the context of a page, and potentially allows for more integrated testing, e.g. via puppeteer.

What does the proposed API look like?

Currently you offer this option in the API:

https://vue-test-utils.vuejs.org/api/options.html#attachtodocument

I believe it should be expanded to allow specification of where in the document it is attached.

const wrapper = mount(Component, {
  attachTo: document.getElementById('app'),
})

This is roughly equivalent to the API used by Enzyme
https://enzymejs.github.io/enzyme/docs/api/mount.html

[dobromir-hristov]

Could you explain a bit what use cases will this solve?

[jnields]

Let's say your Vue app exists within the context of a larger page. Only one part of your app is Vue. Another part is just static HTML, another part is react.

Does it render correctly?

I can verify this by just rendering via Vue and taking screenshots with puppeteer, but then I'm not able to use all of the convenience methods of Vue test utils.

[jnields]

Another use case could be to test that hydration of a SSR paged works successfully. I can't use Vue test utils, as far as I know, to hydrate markup. That could be very beneficial, and, potentially, part of this API.

[lmiller1990]

This makes sense to me. There is a PR; just need to docs to be updated @jnields and we can merge it up.

[lmiller1990]

fixed in #1492