vite-plugin-nightwatch

0.4.6 verified Mon Apr 27 auth: no javascript

Integrates Vite with Nightwatch.js for component testing. Version 0.4.6, latest stable, released 2023. Supports Vue and React components. Enables mounting components, mocking fetch calls, and importing custom scripts. Requires Vite dev server running. Distinct from Cypress/Playwright: uses Nightwatch's native API with simplified setup.

Common errors

error Error: Cannot find module 'vite-plugin-nightwatch' ↓

cause Missing dependency installation

fix

Run: npm install vite-plugin-nightwatch --save-dev

error TypeError: browser.mountVueComponent is not a function ↓

cause Missing Nightwatch plugin registration

fix

Add 'vite-plugin-nightwatch' to plugins array in nightwatch.conf.js

error Error: launch_url is not defined ↓

cause Missing launchUrl or baseUrl in config

fix

Set launchUrl: 'http://localhost:5173' in nightwatch.conf.js

Warnings

breaking Plugin may not work with Vite 4+ if nightwatch.config not properly set ↓

fix Ensure launchUrl matches Vite dev server port and vite_dev_server.start_vite is true.

gotcha mountVueComponent and mountReactComponent must be used after launchComponentRenderer ↓

fix Call browser.launchComponentRenderer() before mounting.

gotcha importScript requires ESM format scripts; CJS will fail silently ↓

fix Use ESM or convert script to .mjs.

breaking Default componentType changed from 'vue' to require explicit setting ↓

fix Explicitly set componentType: 'vue' or 'react' in plugin options.

deprecated browser.mountReactComponent props parameter is an object, not array ↓

fix Pass props as object: { name: 'value' }.

Install

npm install vite-plugin-nightwatch

yarn add vite-plugin-nightwatch

pnpm add vite-plugin-nightwatch

Imports

default (nightwatchPlugin)

wrong

import { nightwatchPlugin } from 'vite-plugin-nightwatch'

correct

import nightwatchPlugin from 'vite-plugin-nightwatch'

Default export only; named export not available.

NightwatchPluginConfig

import type { NightwatchPluginConfig } from 'vite-plugin-nightwatch'

Type import for config options.

browser.mountVueComponent

wrong

browser.mountVueComponent({componentPath: '...'})

correct

browser.mountVueComponent('/src/components/Form.vue', { props: { ... } })

Method on Nightwatch browser object, not a direct import.

Quickstart

Setup Vite config with nightwatch plugin and write a basic component test.

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import nightwatchPlugin from 'vite-plugin-nightwatch';

export default defineConfig({
  plugins: [
    vue(),
    nightwatchPlugin({
      componentType: 'vue'
    })
  ]
});

// nightwatch.conf.js
module.exports = {
  src_folders: ['tests'],
  page_objects_path: [],
  custom_commands_path: [],
  custom_assertions_path: [],
  plugins: ['vite-plugin-nightwatch'],
  vite_dev_server: {
    start_vite: true,
    port: 5173
  },
  launchUrl: 'http://localhost:5173'
};

// tests/example.spec.js
module.exports = {
  'test vue component': function (browser) {
    browser
      .launchComponentRenderer()
      .importScript('/src/components/Form.vue')
      .waitForElementVisible('.form')
      .assert.textContains('.form h1', 'Hello')
      .end();
  }
};