From 4928d936046ded6ec7b221759d3d068b73fa1009 Mon Sep 17 00:00:00 2001 From: unknown Date: Sun, 17 Nov 2019 22:21:05 +0100 Subject: [PATCH] Add custom Vuetify render wrapper to Vuetify test --- src/__tests__/vuetify.js | 31 ++++++++++++++++++++++--------- 1 file changed, 22 insertions(+), 9 deletions(-) diff --git a/src/__tests__/vuetify.js b/src/__tests__/vuetify.js index 17d30e86..0f38421f 100644 --- a/src/__tests__/vuetify.js +++ b/src/__tests__/vuetify.js @@ -5,21 +5,34 @@ import VuetifyDemoComponent from './components/Vuetify' // We need to use a global Vue instance, otherwise Vuetify will complain about // read-only attributes. +// This could also be done in a custom Jest-test-setup file to execute for all tests. // 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. +// Custom render wrapper to integrate Vuetify with Vue Testing Library. +// Vuetify requires you to wrap your app with a v-app component that provides +// a
node. +export const renderWithVuetify = (component, options, callback) => { + return render( + // anonymous component + { + // Vue's render function + render(createElement) { + // wrap the component with a
node and render the test component + return createElement('div', {attrs: {'data-app': true}}, [ + createElement(component), + ]) + }, + }, + // for Vuetify components that use the $vuetify instance property + {vuetify: new Vuetify(), ...options}, + callback, + ) +} test('renders a Vuetify-powered component', async () => { - const {getByText} = render(VuetifyDemoComponent, { - vuetify: new Vuetify(), - }) + const {getByText} = renderWithVuetify(VuetifyDemoComponent) await fireEvent.click(getByText('open'))