Skip to content

Commit 1360c90

Browse files
committed
docs(plugins): Add docs for createStubs plugin hook
1 parent 5a46a69 commit 1360c90

File tree

1 file changed

+50
-4
lines changed

1 file changed

+50
-4
lines changed

docs/guide/extending-vtu/plugins.md

Lines changed: 50 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ Some use cases for plugins:
1010
1. Attaching matchers to the Wrapper instance
1111
1. Attaching functionality to the Wrapper
1212

13-
## Using a Plugin
13+
## Wrapper Plugin
14+
15+
### Using a Plugin
1416

1517
Install plugins by calling the `config.plugins.VueWrapper.install()` method
1618
. This has to be done before you call `mount`.
@@ -43,12 +45,12 @@ once. Follow the instructions of the plugin you're installing.
4345

4446
Check out the [Vue Community Guide](https://vue-community.org/v2/guide/ecosystem/testing.html) or [awesome-vue](https://github.com/vuejs/awesome-vue#test) for a collection of community-contributed plugins and libraries.
4547

46-
## Writing a Plugin
48+
### Writing a Plugin
4749

4850
A Vue Test Utils plugin is simply a function that receives the mounted
4951
`VueWrapper` or `DOMWrapper` instance and can modify it.
5052

51-
### Basic Plugin
53+
#### Basic Plugin
5254

5355
Below is a simple plugin to add a convenient alias to map `wrapper.element` to `wrapper.$el`
5456

@@ -75,7 +77,7 @@ const wrapper = mount({ template: `<h1>🔌 Plugin</h1>` })
7577
console.log(wrapper.$el.innerHTML) // 🔌 Plugin
7678
```
7779

78-
### Data Test ID Plugin
80+
#### Data Test ID Plugin
7981

8082
The below plugin adds a method `findByTestId` to the `VueWrapper` instance. This encourages using a selector strategy relying on test-only attributes on your Vue Components.
8183

@@ -122,6 +124,50 @@ const DataTestIdPlugin = (wrapper) => {
122124
config.plugins.VueWrapper.install(DataTestIdPlugin)
123125
```
124126

127+
## Stubs Plugin
128+
129+
The `config.plugins.createStubs` allows to overwrite the default stub creation provided by VTU.
130+
131+
Some use cases are:
132+
* You want to add more logic into the stubs (for example named slots)
133+
* You want to use different stubs for multiple components (for example stub components from a library)
134+
135+
### Usage
136+
137+
```typescript
138+
config.plugins.createStubs = ({ name, component }) => {
139+
return defineComponent({
140+
render: () => h(`custom-${name}-stub`)
141+
})
142+
}
143+
```
144+
145+
This function will be called everytime VTU generates a stub either from
146+
```typescript
147+
const wrapper = mount(Component, {
148+
global: {
149+
stubs: {
150+
ChildComponent: true
151+
}
152+
}
153+
})
154+
```
155+
or
156+
```typescript
157+
const wrapper = shallowMount(Component)
158+
```
159+
160+
But will not be called, when you explicit set a stub
161+
```typescript
162+
const wrapper = mount(Component, {
163+
global: {
164+
stubs: {
165+
ChildComponent: { template: '<child-stub/>' }
166+
}
167+
}
168+
})
169+
```
170+
125171
## Featuring Your Plugin
126172

127173
If you're missing functionality, consider writing a plugin to extend Vue Test

0 commit comments

Comments
 (0)