@nightwatch/react

[![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 React apps. It uses the Vite dev server under the hood and vite-plugin-nightwatch. Requires Nightwatch 2.4+

``
npm install @nightwatch/react
`

Usage:

Update your Nightwatch configuration and add the plugin to the list:

`js
module.exports = {
plugins: ['@nightwatch/react']

// other nightwatch settings...
}
`

$3

If you already have a Vite project, then the @nightwatch/react 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.js

import nightwatchPlugin from 'vite-plugin-nightwatch'

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

$3


We’ve designed the @nightwatch/react 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/vue plugin.

`js
// nightwatch.conf.js

module.exports = {
plugins: ['@nightwatch/react'],
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.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 React component tests.

$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; an inline string can be also used
- callback – an optional callback function which will be called with the component element

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

`js
const component = await browser.mountComponent('/src/components/Form.jsx', {
prop: 'value'
})
`

A function or a string can be used for passing props that cannot be serialized. If a function is passed, it will be sent as a toString() value.
`js
const component = await browser.mountComponent('/src/components/UserInfo.jsx', function () {
return {
date: new Date(),
text: 'I hope you enjoy reading Ulysses!',
author: {
name: 'Leopold Bloom',
avatarUrl: 'https://upload.wikimedia.org/wikipedia/commons/5/52/Poldy.png'
}
}
});
`

$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