{{ msg }}
', 24 | props: ['msg'], 25 | } 26 | 27 | test('displays message', () => { 28 | const wrapper = mount(MessageComponent, { 29 | props: { 30 | msg: 'Hello world' 31 | } 32 | }) 33 | 34 | // Assert the rendered text of the component 35 | expect(wrapper.text()).toContain('Hello world') 36 | }) 37 | ``` 38 | 39 | ## What Next? 40 | 41 | To see Vue Test Utils in action, [take the Crash Course](./a-crash-course/), where we build a simple Todo app using a test-first approach. 42 | 43 | Docs are split into two main sections: 44 | 45 | * **Essentials**, to cover common uses cases you'll face when testing Vue components. 46 | * **Vue Test Utils in Depth**, to explore other advanced features of the library. 47 | 48 | You can also explore the full [API](../api/). 49 | 50 | Alternatively, if you prefer to learn via video, there is [a number of lectures available here](https://www.youtube.com/playlist?list=PLC2LZCNWKL9ahK1IoODqYxKu5aA9T5IOA). 51 | 52 | -------------------------------------------------------------------------------- /src/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | const sidebar = { 2 | guide: [ 3 | { 4 | title: 'Essentials', 5 | collapsable: false, 6 | children: [ 7 | '/guide/installation', 8 | '/guide/introduction', 9 | '/guide/a-crash-course', 10 | '/guide/conditional-rendering', 11 | '/guide/event-handling', 12 | '/guide/passing-data', 13 | '/guide/forms' 14 | ] 15 | }, 16 | { 17 | title: 'Vue Test Utils in depth', 18 | collapsable: false, 19 | children: [ 20 | '/guide/slots', 21 | '/guide/async-suspense', 22 | '/guide/http-requests', 23 | '/guide/transitions', 24 | '/guide/component-instance', 25 | '/guide/reusability-composition', 26 | '/guide/vuex', 27 | '/guide/vue-router', 28 | '/guide/third-party', 29 | '/guide/stubs-shallow-mount' 30 | ] 31 | }, 32 | { 33 | title: 'Extending Vue Test Utils', 34 | collapsable: false, 35 | children: ['/guide/plugins', '/guide/community-learning'] 36 | }, 37 | { 38 | title: 'Migration to Vue Test Utils 2', 39 | collapsable: false, 40 | children: ['/guide/migration'] 41 | }, 42 | { 43 | title: 'API Reference', 44 | collapsable: false, 45 | children: ['/api/'] 46 | } 47 | ], 48 | api: [ 49 | { 50 | title: 'API Reference', 51 | collapsable: false, 52 | children: ['/api/'] 53 | } 54 | ] 55 | } 56 | 57 | module.exports = { 58 | base: '/v2/', 59 | configureWebpack(config) { 60 | return { 61 | output: { 62 | publicPath: '/v2/' 63 | } 64 | } 65 | }, 66 | title: 'Vue Test Utils', 67 | locales: { 68 | '/': { 69 | lang: 'en-US', 70 | title: 'Vue Test Utils (2.0.0-beta.14)' 71 | } 72 | }, 73 | themeConfig: { 74 | editLinks: true, 75 | sidebarDepth: 2, 76 | sidebar: { 77 | '/guide/': sidebar.guide, 78 | '/api/': sidebar.api 79 | }, 80 | nav: [ 81 | { text: 'Guide', link: '/guide/introduction' }, 82 | { text: 'API Reference', link: '/api/' }, 83 | { text: 'Migration from VTU 1', link: '/guide/migration' }, 84 | { text: 'GitHub', link: 'https://github.com/vuejs/vue-test-utils-next' } 85 | ] 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /src/guide/plugins.md: -------------------------------------------------------------------------------- 1 | ## Plugins 2 | 3 | Plugins add global-level functionality to Vue Test Utils' API. This is the 4 | official way to extend Vue Test Utils' API with custom logic, methods, or 5 | functionality. 6 | 7 | If you're missing a bit of functionality, consider writing a plugin to 8 | extend Vue Test Utils' API. 9 | 10 | Some use cases for plugins: 11 | 1. Aliasing existing public methods 12 | 1. Attaching matchers to the Wrapper instance 13 | 1. Attaching functionality to the Wrapper 14 | 15 | ## Using a Plugin 16 | 17 | Install plugins by calling the `config.plugins.VueWrapper.install()` method 18 | . This has to be done before you call `mount`. 19 | 20 | The `install()` method will receive an instance of `WrapperAPI` containing both 21 | public and private properties of the instance. 22 | 23 | ```js 24 | // setup.js file 25 | import { config } from '@vue/test-utils' 26 | 27 | // locally defined plugin, see "Writing a Plugin" 28 | import MyPlugin from './myPlugin' 29 | 30 | // Install a plugin onto VueWrapper 31 | config.plugins.VueWrapper.install(MyPlugin) 32 | ``` 33 | 34 | You can optionally pass in some options: 35 | ```js 36 | config.plugins.VueWrapper.install(MyPlugin, { someOption: true }) 37 | ``` 38 | 39 | Your plugin should be installed once. If you are using Jest, this should be in your Jest config's `setupFiles` or `setupFilesAfterEnv` file. 40 | 41 | Some plugins automatically call `config.plugins.VueWrapper.install()` when 42 | they're imported. This is common if they're extending multiple interfaces at 43 | once. Follow the instructions of the plugin you're installing. 44 | 45 | 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 46 | ) for a collection of community-contributed plugins and libraries. 47 | 48 | ## Writing a Plugin 49 | 50 | A Vue Test Utils plugin is simply a function that receives the mounted 51 | `VueWrapper` or `DOMWrapper` instance and can modify it. 52 | 53 | ### Basic Plugin 54 | 55 | Below is a simple plugin to add a convenient alias to map `wrapper.element` to `wrapper.$el` 56 | 57 | ```js 58 | // setup.js 59 | import { config } from '@vue/test-utils' 60 | 61 | const myAliasPlugin = (wrapper) => { 62 | return { 63 | $el: wrapper.element // simple aliases 64 | } 65 | } 66 | 67 | // Call install on the type you want to extend 68 | // You can write a plugin for any value inside of config.plugins 69 | config.plugins.VueWrapper.install(myAliasPlugin) 70 | ``` 71 | 72 | And in your spec, you'll be able to use your plugin after `mount`. 73 | ```js 74 | // component.spec.js 75 | const wrapper = mount({ template: `