vite-plugin-nightwatch

Component testing plugin that integrates Vite with Nightwatch.js. Supports Vue and React components.

[![Vue Tests Status][build-badge]][build]
[![version][version-badge]][package]
[![Discord][discord-badge]][discord]
[![MIT License][license-badge]][license]

``
npm install vite-plugin-nightwatch
`

Usage:

Update your Vite configuration:

###
`js
import nightwatchPlugin from 'vite-plugin-nightwatch'

export default {
plugins: [
// ... other plugins, such as vue() or react()
nightwatchPlugin()
]
}
`

Nightwatch assumes the Vite dev server is already running and will be using http://localhost:3000 as base url. You can change that in your nightwatch.conf.js by setting either launchUrl or baseUrl properties.

To start the Vite dev server, in your project run:
`sh
npm run dev
`

Configuration:

The plugin accepts a few config options:

$3

Specify the type of component to be tested. Possible values:
- vue (default, if none specified)
- react

`js
export default {
plugins: [
// ... other plugins, such as vue() or react()
nightwatchPlugin({
componentType: 'vue'
})
]
}
`

$3

Specify the path to a custom test renderer to be used. Default renderers are included in the package for both Vue and React components, but this option can overwrite that value.

`js
export 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 tests.

$3

Parameters:
- componentPath – location of the component file (.vue) 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.mountVueComponent('/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


Parameters:
- componentPath – location of the component file (.jsx) to be mounted
- props – properties to be passed to the React component, this will be serialized to JSON
- callback – an optional callback function which will be called with the component element

#### Example:
`js
const component = await browser.mountReactComponent('/src/components/Form.jsx')
`

$3


This will call browser.navigateTo('/nightwatch/') 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}/nightwatch, 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