Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a2c0f6f

Browse files
Edgar Schnürigeredgar.schnueriger
Edgar Schnüriger
and
edgar.schnueriger
authored
docs: Improve approach for integration with Vuetify (testing-library#123)
* Alternative approach to preserve mountOptions I suggest an alternative approach to the problem to preserve things like `props, propsData, updateProps` that are applied to the root node only. * Add tests * Fix comments * Apply review suggestions Co-authored-by: edgar.schnueriger <edgar.schnueriger@geopraevent.ch>
1 parent 850bd4c commit a2c0f6f

File tree

2 files changed

+24
-11
lines changed

2 files changed

+24
-11
lines changed

‎src/__tests__/components/Vuetify.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,19 @@
77
<v-card-text>Lorem ipsum dolor sit amet.</v-card-text>
88
</v-card>
99
</v-dialog>
10+
<span v-if="showHint">This is a hint</span>
1011
</v-app>
1112
</template>
1213

1314
<script>
1415
export default {
1516
name: 'VuetifyDemoComponent',
17+
props: {
18+
showHint: {
19+
type: Boolean,
20+
default: false,
21+
},
22+
},
1623
data() {
1724
return {
1825
show: false,

‎src/__tests__/vuetify.js‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import '@testing-library/jest-dom'
12
import Vue from 'vue'
23
import {render, fireEvent} from '@testing-library/vue'
34
import Vuetify from 'vuetify'
@@ -10,23 +11,18 @@ import VuetifyDemoComponent from './components/Vuetify'
1011
// https://vuetifyjs.com/en/getting-started/unit-testing
1112
Vue.use(Vuetify)
1213

13-
// Custom render wrapper to integrate Vuetify with Vue Testing Library.
14+
// Custom container to integrate Vuetify with Vue Testing Library.
1415
// Vuetify requires you to wrap your app with a v-app component that provides
1516
// a <div data-app="true"> node.
1617
const renderWithVuetify = (component, options, callback) => {
1718
return render(
18-
// anonymous component
19+
component,
1920
{
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-
},
21+
container: document.createElement('div').setAttribute('data-app', 'true'),
22+
// for Vuetify components that use the $vuetify instance property
23+
vuetify: new Vuetify(),
24+
...options,
2725
},
28-
// for Vuetify components that use the $vuetify instance property
29-
{vuetify: new Vuetify(), ...options},
3026
callback,
3127
)
3228
}
@@ -44,3 +40,13 @@ test('renders a Vuetify-powered component', async () => {
4440
</div>
4541
`)
4642
})
43+
44+
test('allows changing props', async () => {
45+
const {queryByText, updateProps} = renderWithVuetify(VuetifyDemoComponent)
46+
47+
expect(queryByText('This is a hint')).not.toBeInTheDocument()
48+
49+
await updateProps({showHint: true})
50+
51+
expect(queryByText('This is a hint')).toBeInTheDocument()
52+
})

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /