Skip to content

Commit 7b8e1d7

Browse files
committed
chore: update vue api doc to match implementation
1 parent d61fd25 commit 7b8e1d7

File tree

2 files changed

+58
-37
lines changed

2 files changed

+58
-37
lines changed

docs/vue-testing-library/api.mdx

+14-37
Original file line numberDiff line numberDiff line change
@@ -7,29 +7,27 @@ title: API
77

88
It also exposes these methods:
99

10-
- [`render(Component, options, callback)`](#rendercomponent-options-callback)
10+
- [`render(Component, options)`](#rendercomponent-options)
1111
- [Parameters](#parameters)
1212
- [Component](#component)
1313
- [Options](#options)
14-
- [Callback Function](#callback-function)
1514
- [`render` result](#render-result)
1615
- [`...queries`](#queries)
1716
- [`container`](#container)
1817
- [`baseElement`](#baseelement)
19-
- [`debug(element)`](#debugelement)
20-
- [`unmount()`](#unmount)
21-
- [`isUnmounted()`](#isunmounted)
22-
- [`html()`](#html)
23-
- [`emitted()`](#emitted)
24-
- [`updateProps(props)`](#updatepropsprops)
18+
- [`debug`](#debug)
19+
- [`unmount`](#unmount)
20+
- [`html`](#html)
21+
- [`emitted`](#emitted)
22+
- [`rerender`](#rerenderprops)
2523
- [`fireEvent`](#fireevent)
2624
- [`touch(elem)`](#touchelem)
2725
- [`update(elem, value)`](#updateelem-value)
2826
- [`cleanup`](#cleanup)
2927

3028
---
3129

32-
## `render(Component, options, callback)`
30+
## `render(Component, options)`
3331

3432
The `render` function is the only way of rendering components in Vue Testing
3533
Library.
@@ -44,10 +42,9 @@ function render(Component, options, callbackFunction) {
4442
baseElement,
4543
debug,
4644
unmount,
47-
isUnmounted,
4845
html,
4946
emitted,
50-
updateProps,
47+
rerender,
5148
}
5249
}
5350
```
@@ -106,20 +103,6 @@ If the `container` is specified, then this defaults to that, otherwise this
106103
defaults to `document.body`. `baseElement` is used as the base element for the
107104
queries as well as what is printed when you use `debug()`.
108105

109-
#### Callback Function
110-
111-
```js
112-
function callbackFunction(vueInstance, vuexStore, router) {}
113-
```
114-
115-
A callback function that receives the Vue instance as a parameter. Its return
116-
value is merged with [options](#options), allowing 3rd party plugins to be
117-
installed prior to mount. To see how this works, see the example using
118-
[`vue-i18n`](https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/translations-vue-i18n.js).
119-
120-
The function will also receive the Store or the Router object if the associated
121-
option was passed in during render.
122-
123106
### `render` result
124107

125108
The `render` method returns an object that has a few properties:
@@ -164,13 +147,10 @@ renders its HTML directly in the body.
164147
> Note: the queries returned by the `render` looks into `baseElement`, so you
165148
> can use queries to test your portal component without the `baseElement`.
166149
167-
#### `debug(element)`
150+
#### `debug`
168151

169152
This method is a shortcut for `console.log(prettyDOM(element))`.
170153

171-
`element` can either be a DOM element or an array containing DOM elements. It
172-
defaults to `baseElement`
173-
174154
```jsx
175155
import {render} from '@testing-library/vue'
176156

@@ -183,8 +163,6 @@ debug()
183163
// <div>
184164
// <h1>Hello World</h1>
185165
// </div>
186-
187-
// you can also pass an element: debug(getByTestId('messages'))
188166
```
189167

190168
This is a simple wrapper around `prettyDOM` which is also exposed and comes from
@@ -195,10 +173,6 @@ This is a simple wrapper around `prettyDOM` which is also exposed and comes from
195173
An alias for `@vue/test-utils`
196174
[destroy](https://vue-test-utils.vuejs.org/api/wrapper/#destroy).
197175

198-
#### `isUnmounted()`
199-
200-
Returns whether if a Vue component has been destroyed.
201-
202176
#### `html()`
203177

204178
An alias for `@vue/test-utils`
@@ -209,12 +183,15 @@ An alias for `@vue/test-utils`
209183
An alias for `@vue/test-utils`
210184
[emitted](https://vue-test-utils.vuejs.org/api/wrapper/#emitted).
211185

212-
#### `updateProps(props)`
186+
#### `rerender(props)`
213187

214188
An alias for `@vue/test-utils`
215189
[setProps](https://vue-test-utils.vuejs.org/api/wrapper/#setprops).
216190

217-
It returns a Promise through `wait()`, so you can `await updateProps(...)`.
191+
It returns a Promise through so you can `await rerender(...)`.
192+
193+
See
194+
[update properties example](vue-testing-library/examples.mdx#example-updating-properties).
218195

219196
---
220197

docs/vue-testing-library/examples.mdx

+44
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,50 @@ test('increments value on click', async () => {
5050
})
5151
```
5252

53+
## Example updating properties:
54+
55+
```html
56+
<template>
57+
<div>
58+
<p>The sky is {{ sky }}</p>
59+
<p>And the grass is {{ grass }}</p>
60+
</div>
61+
</template>
62+
63+
<script>
64+
export default {
65+
props: {
66+
sky: {type: String, default: 'green'},
67+
grass: {type: String, default: 'blue'},
68+
},
69+
}
70+
</script>
71+
```
72+
73+
```js
74+
import {render} from '@testing-library/vue'
75+
import Component from './Component.vue'
76+
77+
test('properly handles property updates', async () => {
78+
const {getByText, rerender} = render(Component, {
79+
props: {
80+
sky: 'green',
81+
grass: 'blue',
82+
},
83+
})
84+
85+
// Asserts initial state.
86+
getByText('The sky is green')
87+
getByText('And the grass is blue')
88+
89+
await rerender({sky: 'Aquamarine'})
90+
91+
// Asserts updated state
92+
getByText('The sky is Aquamarine')
93+
getByText('And the grass is blue')
94+
})
95+
```
96+
5397
## Example using `v-model`:
5498

5599
```html

0 commit comments

Comments
 (0)