Workflow:Nightwatchjs Nightwatch Component Testing
| Knowledge Sources | |
|---|---|
| Domains | Component_Testing, Frontend_Development, React, Vue |
| Last Updated | 2026-02-12 00:00 GMT |
Overview
End-to-end process for testing individual UI components in isolation using Nightwatch's component testing capabilities for React, Vue, Angular, and Storybook.
Description
This workflow covers testing frontend components outside of the full application context. Nightwatch mounts individual components directly in a real browser, allowing tests to interact with them using the same API used for E2E tests. This provides higher fidelity than JSDOM-based testing while remaining faster than full E2E tests. The workflow supports React, Vue, Angular, and Storybook components, each with their own mounting plugin.
Usage
Execute this workflow when you need to validate the behavior and rendering of individual UI components without running the full application. This is particularly useful for design system components, form controls, interactive widgets, or any component with complex internal state or user interaction patterns that benefit from real browser testing.
Execution Steps
Step 1: Install Component Testing Plugin
Install the appropriate Nightwatch component testing plugin for your framework. Each supported framework (React, Vue, Angular, Storybook) has a dedicated plugin that handles component mounting, bundling, and dev server integration.
Key considerations:
- React uses @nightwatch/react with Vite or Webpack bundling
- Vue uses @nightwatch/vue with Vite integration
- Angular uses @nightwatch/angular
- Storybook uses @nightwatch/storybook for existing story files
- The plugin handles dev server startup and component compilation
Step 2: Configure Component Test Environment
Update the Nightwatch configuration to enable component testing. This involves specifying the component testing plugin, setting the source folder for component tests, and configuring bundler settings (Vite or Webpack).
What happens:
- Add the plugin to the Nightwatch config plugins array
- Configure the bundler (Vite preferred for speed)
- Set component test source folders separate from E2E tests
- Configure browser capabilities for component test runs
Step 3: Write Component Test Files
Create test files that import the component under test and use the render/mount function provided by the plugin. Tests interact with the mounted component using standard Nightwatch commands and assertions.
Key considerations:
- Import the component directly in the test file
- Use the framework-specific render function to mount the component
- Pass props, events, and slots as arguments to the render function
- The mounted component appears in a real browser for interaction
Step 4: Interact and Assert
Use Nightwatch's element API, expect API, and assert API to interact with the rendered component and verify its behavior. The global element() function and find-by-role/text utilities are particularly useful for component tests.
What happens:
- Use element() and findByRole() to locate component elements
- Simulate user interactions (click, type, select)
- Assert rendered output, state changes, and event emissions
- Use waitUntil for asynchronous state updates
Step 5: Execute Component Tests
Run component tests using the Nightwatch CLI with the component flag or by targeting the component test environment. The plugin automatically starts a dev server, compiles the component, and opens a browser for testing.
Key considerations:
- Use the --component flag or environment to run only component tests
- Tests run in a real browser (Chrome/Firefox) for accurate rendering
- Dev server hot-reloads on file changes during watch mode
- Results use the same reporting as E2E tests (JUnit, HTML)