diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index adda6af..197bae1 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -67,7 +67,7 @@ module.exports = {
locales: {
'/': {
lang: 'en-US',
- title: 'Vue Test Utils (2.0.0-beta.7)'
+ title: 'Vue Test Utils (2.0.0-beta.10)'
}
},
themeConfig: {
diff --git a/src/api/README.md b/src/api/README.md
index f0b61b5..fcd2893 100644
--- a/src/api/README.md
+++ b/src/api/README.md
@@ -66,6 +66,45 @@ test('mounts on a specific element', () => {
})
```
+### `attrs`
+
+Assigns attributes to component.
+
+```js
+test('assigns extra attributes on components', () => {
+ const wrapper = mount(Component, {
+ attrs: {
+ id: 'hello',
+ disabled: true
+ }
+ })
+
+ expect(wrapper.attributes()).toEqual({
+ disabled: 'true',
+ id: 'hello'
+ })
+})
+```
+
+Notice that setting a prop will always trump an attribute:
+
+```js
+test('attribute is overridden by a prop with the same name', () => {
+ const wrapper = mount(Component, {
+ props: {
+ message: 'Hello World'
+ },
+ attrs: {
+ message: 'this will get overridden'
+ }
+ })
+
+ expect(wrapper.props()).toEqual({ message: 'Hello World' })
+
+ expect(wrapper.attributes()).toEqual({})
+})
+```
+
### `data`
Overrides a component's default `data`. Must be a function.
@@ -463,6 +502,74 @@ test('stubs a component using a custom component', () => {
})
```
+### `global.config`
+
+Configures [Vue's application global configuration](https://v3.vuejs.org/api/application-config.html#application-config).
+
+### `global.renderStubDefaultSlot`
+
+Renders the `default` slot content, even when using `shallow` or `shallowMount`.
+
+Due to technical limitations, this behavior cannot be extended to slots other than the default one.
+
+```js
+import { config, mount } from '@vue/test-utils'
+
+beforeAll(() => {
+ config.renderStubDefaultSlot = true
+})
+
+afterAll(() => {
+ config.renderStubDefaultSlot = false
+})
+
+test('shallow with stubs', () => {
+ const Component = {
+ template: `
`
+ }
+
+ const wrapper = mount(Component, {
+ shallow: true
+ })
+
+ expect(wrapper.html()).toContain('Content from the default slot')
+})
+```
+
+::: tip
+This behavior is global, not on a mount by mount basis. Remember to enable/disable it before and after each test.
+:::
+
+### `shallow`
+
+Stubs out out all child components from the components under testing.
+
+```js
+test('stubs all components automatically using { shallow: true }', () => {
+ const Component = {
+ template: `
+
+
+ `,
+ components: {
+ CustomComponent,
+ AnotherComponent
+ }
+ }
+
+ const wrapper = mount(Component, { shallow: true })
+
+ expect(wrapper.html()).toEqual(
+ ``
+ )
+}
+```
+
+::: tip
+`shallowMount` is an alias to mounting a component with `shallow: true`.
+:::
+
+
## Wrapper methods
When you use `mount`, a `VueWrapper` is returned with a number of useful methods for testing. A `VueWrapper` is a thin wrapper around your component instance. Methods like `find` return a `DOMWrapper`, which is a thin wrapper around the DOM nodes in your component and it's children. Both implement a similar same API.
@@ -859,6 +966,21 @@ test('html', () => {
})
```
+### `isVisible`
+
+Verify whether or not a found element is visible or not.
+
+```js
+test('isVisible', () => {
+ const Comp = {
+ template: `
`
+ }
+ const wrapper = mount(Comp)
+
+ expect(wrapper.find('span').isVisible()).toBe(false)
+})
+```
+
### `props`
Returns props applied on a Vue Component. This should be used mostly to assert props applied to a stubbed component.
@@ -912,6 +1034,37 @@ test('props', () => {
})
```
+### `setData`
+
+Updates component data.
+
+::: tip
+You should use `await` when you call `setData` to ensure that Vue updates the DOM before you make an assertion.
+:::
+
+`Component.vue`:
+
+```js
+test('updates component data', async () => {
+ const Component = {
+ template: 'Count: {{ count }}
',
+ data: () => ({ count: 0 })
+ }
+
+ const wrapper = mount(Component)
+ expect(wrapper.html()).toContain('Count: 0')
+
+ await wrapper.setData({ count: 1 })
+
+ expect(wrapper.html()).toContain('Count: 1')
+})
+```
+
+Notice that `setData` does not allow setting new properties that are not
+defined in the component.
+
+Also, notice that `setData` does not modify composition API `setup()` data.
+
### `setProps`
Updates component props.
@@ -1093,4 +1246,4 @@ test('unmount', () => {
### `vm`
-This is the ```Vue``` instance. You can access all of the [instance methods and properties of a vm](https://v3.vuejs.org/api/instance-properties.html) with ```wrapper.vm```. This only exists on ```VueWrapper```.
+This is the ```Vue``` instance. You can access all of the [instance methods and properties of a vm](https://v3.vuejs.org/api/instance-properties.html) with ```wrapper.vm```. This only exists on ```VueWrapper```.