Nightwatch plugin which adds support for Vue component testing using the Vite dev server. Requires Nightwatch 2.0+
npm install @nightwatch/vue

[![Build Status][build-badge]][build]
[![version][version-badge]][package]
[![Discord][discord-badge]][discord]
[![MIT License][license-badge]][license]
Official Nightwatch plugin which adds component testing support for Vue apps.
It uses the Vite dev server under the hood and vite-plugin-nightwatch. Requires Nightwatch 2.4+
```
npm install @nightwatch/vue
Update your Nightwatch configuration and add the plugin to the list:
`js`
module.exports = {
plugins: ['@nightwatch/vue']
// other nightwatch settings...
}
plugin will try to use the existing vite.config.js or vite.config.ts, if either one is found.Check the vite-plugin-nightwatch project for more configuration options.
Update the
vite.config.js and add the vite-plugin-nightwatch plugin:`js
// vite.config.jsimport nightwatchPlugin from 'vite-plugin-nightwatch'
export default {
plugins: [
// ... other plugins, such as vue()
nightwatchPlugin()
]
})
`
$3
We’ve designed the @nightwatch/vue plugin to work with sensible configuration defaults, but in some more advanced scenarios you may need to change some of the config options.#### Vite dev server
By default, Nightwatch will attempt to start the Vite dev server automatically. You can disable that by adding the below in your
nightwatch.conf.js file, under the vite_dev_server dictionary.This is common to other component testing plugins that are based on Vite, such as the
@nightwatch/react plugin.`js
// nightwatch.conf.jsmodule.exports = {
plugins: ['@nightwatch/vue'],
vite_dev_server: {
start_vite: true,
port: 5173
}
}
`#### Plugin options
The plugin accepts a few config options which can be set when working with an existing
vite.config.js file in the project.##### -
renderPage
Specify the path to a custom test renderer to be used. A default renderer is included in the package, but this option can overwrite that value.`js
// vite.config.jsexport default {
plugins: [
// ... other plugins, such as vue() or react()
nightwatchPlugin({
renderPage: './src/test_renderer.html'
})
]
}
`API Commands:
This plugin includes a few Nightwatch commands which can be used while
writing Vue component tests.$3
Parameters:
- componentPath – location of the component file (.jsx) to be mounted
- options – this can include:
- props - properties to be passed to the Vue component, this will be serialized to JSON
- plugins: if needed, a store (VueX or Pinia) and a router can be loaded together with the component
- mocks: this can be a list of url calls that can be mocked (will be passed to sinon automatically); at the moment only Fetch API calls can be mocked, but XHR support will be added soon.
- callback – an optional callback function which will be called with the component element#### Example:
`js
const component = await browser.mountComponent('/src/components/Form.vue')
``js
const component = await browser.mountComponent('/src/components/Welcome.vue', {
props: {
username: 'John Doe'
}
})
``js
const component = await browser.mountComponent('/src/components/Form.vue', {
plugins: {
store: '/src/lib/store.js',
router: '/src/lib/router.js'
}, mocks: {
'/api/get-user': {
type: 'fetch',
body: {
data: {
"firstName": "Jimmy",
"lastName": "Hendrix"
}
}
}
}
})
`$3
This will call browser.navigateTo('/test_renderer/') and open the browser. Needs to be used before the .importScript() command, if used.You can also set
launchUrl as a global at runtime and then the url to be used will be ${browser.globals.launchUrl}/test_renderer, which makes it possible to set the launch url dynamically.$3
Parameters:
- scriptPath – location of the script file to inject into the page which will render the component; needs to be written in ESM format
- options – this can include:
- scriptType: the type attribute to be set on the