Bound queries to base element

Author: afontcu

package-lock.json

@@ -56,6 +56,7 @@
     "vue-jest": "^3.0.4",
     "vue-router": "^3.1.2",
     "vue-template-compiler": "^2.6.10",
+    "vuetify": "^2.0.19",
     "vuex": "^3.1.1"
   },
   "peerDependencies": {

package.json

@@ -0,0 +1,22 @@
+<template>
+  <v-app>
+    <v-btn @click="show = true">open</v-btn>
+    <v-dialog v-model="show">
+      <v-card>
+        <v-card-title class="headline green lighten-3">Lorem</v-card-title>
+        <v-card-text>Lorem ipsum dolor sit amet.</v-card-text>
+      </v-card>
+    </v-dialog>
+  </v-app>
+</template>
+
+<script>
+export default {
+  name: 'VuetifyDemoComponent',
+  data() {
+    return {
+      show: false,
+    }
+  },
+}
+</script>

src/__tests__/components/Vuetify.vue

@@ -0,0 +1,36 @@
+import {render} from '@testing-library/vue'
+import '@testing-library/jest-dom/extend-expect'
+
+test('returns baseElement which defaults to document.body', () => {
+  const {baseElement} = render({template: '<div />'})
+  expect(baseElement).toBe(document.body)
+})
+
+test('returns custom baseElement', () => {
+  const {baseElement} = render(
+    {
+      template: '<div />',
+    },
+    {
+      baseElement: document.createElement('blink'),
+    },
+  )
+
+  expect(baseElement).toMatchInlineSnapshot(`
+    <blink>
+      <div>
+        <div />
+      </div>
+    </blink>
+  `)
+})
+
+test('renders container', () => {
+  const {container, getByTestId} = render({
+    template: '<div data-testid="myDiv">my content</div>',
+  })
+
+  expect(container.firstChild).toHaveTextContent(
+    getByTestId('myDiv').textContent,
+  )
+})

src/__tests__/render.js

@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import {render, fireEvent} from '@testing-library/vue'
+import Vuetify from 'vuetify'
+import VuetifyDemoComponent from './components/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)
+
+// Vuetify requires you to wrap you app with a v-app component that provides
+// a <div data-app="true"> node. So you can do that, or you can also set the
+// attribute to the DOM.
+document.body.setAttribute('data-app', true)
+// Another solution is to create a custom renderer that provides all the
+// environment required by Vuetify.
+
+test('renders a Vuetify-powered component', async () => {
+  const {getByText} = render(VuetifyDemoComponent, {
+    vuetify: new Vuetify(),
+  })
+
+  await fireEvent.click(getByText('open'))
+
+  expect(getByText('Lorem ipsum dolor sit amet.')).toMatchInlineSnapshot(`
+    <div
+      class="v-card__text"
+    >
+      Lorem ipsum dolor sit amet.
+    </div>
+  `)
+})

src/__tests__/vuetify.js

@@ -14,6 +14,10 @@ function render(
   {store = null, routes = null, ...mountOptions} = {},
   configurationCb,
 ) {
+  const div = document.createElement('div')
+  const baseElement = mountOptions.baseElement || document.body
+  const container = baseElement.appendChild(div)
+
   const localVue = createLocalVue()
   let vuexStore = null
   let router = null
@@ -53,15 +57,12 @@ function render(
   })
 
   mountedWrappers.add(wrapper)
-
-  const div = document.createElement('div')
-  wrapper.element.parentNode.insertBefore(div, wrapper.element)
-  div.appendChild(wrapper.element)
+  container.appendChild(wrapper.element)
 
   return {
-    container: wrapper.element.parentNode,
-    baseElement: document.body,
-    debug: (el = wrapper.element) => logDOM(el),
+    container,
+    baseElement,
+    debug: (el = baseElement) => logDOM(el),
     unmount: () => wrapper.destroy(),
     isUnmounted: () => wrapper.vm._isDestroyed,
     html: () => wrapper.html(),
@@ -70,7 +71,7 @@ function render(
       wrapper.setProps(_)
       return wait()
     },
-    ...getQueriesForElement(wrapper.element.parentNode),
+    ...getQueriesForElement(baseElement),
   }
 }