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 @@ + + + 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), } }