Wraps rendered component in a div

[tim-maguire]

Hello @dfcook really happy you've made this library.

A little problem I've found is that is that you can't use the getQueriesForElement methods on the returned element e.g.

// SimpleButton.vue
<template>
  <button :class="typeClass" @click="clicked">{{ text }}</button>
</template>

// button-test.js
test('renders button with text', () => {
  const buttonText = "Click me; I'm sick"
  const { getByText } = render(SimpleButton, {
    props: { text: buttonText, clicked: () => true }
  })

  getByText(buttonText)
})

As it stands this fails because getByText is querying within the returned element. This scenario works in react-testing-library because it wraps the rendered component in a div.

This PR essentially wraps the vue-test-utils wrapper in a div and passes that to the getQueriesForElement methods.

For good measure it returns the wrapped wrapper as container along with the document.body as baseElement from the render function - to bring it more closely in line with react-testing-library. But maybe this is superfluous..?

I've added a test for the above use case and all the current tests still pass.

[coveralls]

Pull Request Test Coverage Report for Build 67

• 6 of 6 (100.0%) changed or added relevant lines in 1 file are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+0.8%) to 95.0%

---

Totals
Change from base Build 65:	0.8%
Covered Lines:	41
Relevant Lines:	42

---

💛 - Coveralls

[dfcook]

Great work, thanks