@@ -5,21 +5,34 @@ import VuetifyDemoComponent from './components/Vuetify'
55
66// We need to use a global Vue instance, otherwise Vuetify will complain about
77// read-only attributes.
8+ // This could also be done in a custom Jest-test-setup file to execute for all tests.
89// More info: https://github.com/vuetifyjs/vuetify/issues/4068
910// https://vuetifyjs.com/en/getting-started/unit-testing
1011Vue . use ( Vuetify )
1112
12- // Vuetify requires you to wrap you app with a v-app component that provides
13- // a <div data-app="true"> node. So you can do that, or you can also set the
14- // attribute to the DOM.
15- document . body . setAttribute ( 'data-app' , true )
16- // Another solution is to create a custom renderer that provides all the
17- // environment required by Vuetify.
13+ // Custom render wrapper to integrate Vuetify with Vue Testing Library.
14+ // Vuetify requires you to wrap your app with a v-app component that provides
15+ // a <div data-app="true"> node.
16+ export const renderWithVuetify = ( component , options , callback ) => {
17+ return render (
18+ // anonymous component
19+ {
20+ // Vue's render function
21+ render ( createElement ) {
22+ // wrap the component with a <div data-app="true"> node and render the test component
23+ return createElement ( 'div' , { attrs : { 'data-app' : true } } , [
24+ createElement ( component ) ,
25+ ] )
26+ } ,
27+ } ,
28+ // for Vuetify components that use the $vuetify instance property
29+ { vuetify : new Vuetify ( ) , ...options } ,
30+ callback ,
31+ )
32+ }
1833
1934test ( 'renders a Vuetify-powered component' , async ( ) => {
20- const { getByText} = render ( VuetifyDemoComponent , {
21- vuetify : new Vuetify ( ) ,
22- } )
35+ const { getByText} = renderWithVuetify ( VuetifyDemoComponent )
2336
2437 await fireEvent . click ( getByText ( 'open' ) )
2538
0 commit comments