diff --git a/package-lock.json b/package-lock.json
index db128a05..ba279c77 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11690,6 +11690,12 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
+ "vuetify": {
+ "version": "2.0.19",
+ "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.0.19.tgz",
+ "integrity": "sha512-zBskf77Z+RH8+Qs1q0NIDv/1enVkOoVH2dcdjcs+ZUNOhnlG0IkDedmqE2+PNm0JvJdgpOaV8wq+Pl69TGD2Hg==",
+ "dev": true
+ },
"vuex": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",
diff --git a/package.json b/package.json
index 1a15eba0..cde5f72d 100644
--- a/package.json
+++ b/package.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": {
diff --git a/src/__tests__/components/Vuetify.vue b/src/__tests__/components/Vuetify.vue
new file mode 100644
index 00000000..3add64fa
--- /dev/null
+++ b/src/__tests__/components/Vuetify.vue
@@ -0,0 +1,22 @@
+
+
+ open
+
+
+ Lorem
+ Lorem ipsum dolor sit amet.
+
+
+
+
+
+
diff --git a/src/__tests__/render.js b/src/__tests__/render.js
new file mode 100644
index 00000000..4a48772a
--- /dev/null
+++ b/src/__tests__/render.js
@@ -0,0 +1,77 @@
+import {render} from '@testing-library/vue'
+import '@testing-library/jest-dom/extend-expect'
+
+test('baseElement defaults to document.body', () => {
+ const {baseElement} = render({template: '
'})
+ expect(baseElement).toBe(document.body)
+})
+
+test('renders custom baseElement', () => {
+ const Component = {template: ''}
+
+ const {baseElement, container} = render(Component, {
+ baseElement: document.createElement('blink'),
+ })
+
+ expect(baseElement).toMatchInlineSnapshot(`
+
+ `)
+
+ expect(container).toMatchInlineSnapshot(`
+
+
+
+ `)
+})
+
+test('renders container', () => {
+ const {container, getByTestId} = render({
+ template: 'my content
',
+ })
+
+ expect(container.firstChild).toHaveTextContent(
+ getByTestId('myDiv').textContent,
+ )
+})
+
+test('container defaults to div', () => {
+ const {container} = render({template: ''})
+
+ expect(container.tagName).toBe('DIV')
+})
+
+test('renders custom container', () => {
+ const blink = document.createElement('blink')
+ const Component = {template: ''}
+
+ const {container} = render(Component, {
+ container: document.body.appendChild(blink),
+ })
+
+ expect(container).toBe(blink)
+})
+
+test('baseElement matches container if not custom baseElement is provided', () => {
+ const blink = document.createElement('blink')
+ const Component = {template: ''}
+
+ const {container, baseElement} = render(Component, {
+ container: document.body.appendChild(blink),
+ })
+
+ expect(container).toMatchInlineSnapshot(`
+
+ `)
+
+ expect(baseElement).toMatchInlineSnapshot(`
+
+ `)
+})
diff --git a/src/__tests__/vuetify.js b/src/__tests__/vuetify.js
new file mode 100644
index 00000000..17d30e86
--- /dev/null
+++ b/src/__tests__/vuetify.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 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(`
+
+ Lorem ipsum dolor sit amet.
+
+ `)
+})
diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js
index ed072556..acfb1176 100644
--- a/src/vue-testing-library.js
+++ b/src/vue-testing-library.js
@@ -11,9 +11,19 @@ const mountedWrappers = new Set()
function render(
TestComponent,
- {store = null, routes = null, ...mountOptions} = {},
+ {
+ store = null,
+ routes = null,
+ container: customContainer,
+ baseElement: customBaseElement,
+ ...mountOptions
+ } = {},
configurationCb,
) {
+ const div = document.createElement('div')
+ const baseElement = customBaseElement || customContainer || document.body
+ const container = customContainer || baseElement.appendChild(div)
+
const localVue = createLocalVue()
let vuexStore = null
let router = null
@@ -53,15 +63,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 +77,7 @@ function render(
wrapper.setProps(_)
return wait()
},
- ...getQueriesForElement(wrapper.element.parentNode),
+ ...getQueriesForElement(baseElement),
}
}