fix: plugin should work in the context of a monorepo

README.md

@@ -14,7 +14,7 @@ npm install vite-plugin-nightwatch
 ## Usage:
 Update your [Vite configuration](https://vitejs.dev/config/):
 
-### 
+###
 ```js
 import nightwatchPlugin from 'vite-plugin-nightwatch'
 
@@ -75,7 +75,7 @@ This plugin includes a few Nightwatch commands which can be used while writing t
 - `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](https://sinonjs.org/) automatically); at the moment only [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) calls can be mocked, but XHR support will be added soon.  
+  - `mocks`: this can be a list of url calls that can be mocked (will be passed to [sinon](https://sinonjs.org/) automatically); at the moment only [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/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:
@@ -114,7 +114,7 @@ const component = await browser.mountReactComponent('/src/components/Form.jsx')
 ### - browser.launchComponentRenderer():
 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. 
+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.
 
 ### - browser.importScript(`scriptPath`, `[options]`, `[callback]`):
 **Parameters:**
@@ -133,7 +133,7 @@ const formComponent = await browser
 
 Example `scriptToImport.js`:
 ```js
-import {mount} from '/node_modules/@vue/test-utils/dist/vue-test-utils.esm-browser.js'
+import {mount} from '@vue/test-utils/dist/vue-test-utils.esm-browser.js'
 import Component from '/test/components/vue/Form.vue'
 
 let element = mount(Component, {
@@ -155,7 +155,7 @@ However, for when running the tests in Chrome, you can use the DevTools to do de
 - `--debug` - this will cause the test execution to pause right after the component is rendered
 
 
-## Running the Vite dev-server programmatically from Nightwatch 
+## Running the Vite dev-server programmatically from Nightwatch
 It is also possible to start the Vite dev server from the Nightwatch global `before` hook and close it in the `after` hook.
 
 We are doing that as part of the tests for this plugin. Here's how your external `globals.js` file should look like:
@@ -218,7 +218,7 @@ To run the React component tests:
 ```sh
 npm run test-react
 ```
- 
+
 
 ## License
 MIT

index.d.ts

@@ -11,6 +11,11 @@ declare module 'nightwatch' {
       options: { scriptType: string; componentType: string },
       callback?: () => void
     ): this;
+    mountComponent<TProps extends Record<string, any>>(
+      componentPath: string,
+      props?: TProps,
+      callback?: (this: NightwatchAPI, result: Element) => void
+    ): Awaitable<this, Element>;
     mountReactComponent<TProps extends Record<string, any>>(
       componentPath: string,
       props?: TProps,

nightwatch/commands/mountReactComponent.js

@@ -2,6 +2,7 @@ const AssertionError = require('assertion-error');
 const fs = require('fs');
 const {types} = require('util');
 const path = require('path');
+const {version} = require('react');
 
 const {TMP_TEST_NAME, writeTmpTestFile} = require('../../src/tmp_file.js');
 
@@ -167,7 +168,7 @@ module.exports = class Command {
           done(browserResult);
         }, 100);
       }, [Command.rootElementId]);
-   
+
     if (!result || !result.element || preRenderError || postRenderError) {
       const err = this.getError('Could not mount the component.');
       if (preRenderError) {
@@ -200,7 +201,6 @@ module.exports = class Command {
   }
 
   static _getReactImports() {
-    const {version} = require(path.resolve('node_modules', 'react'));
     const reactDOMSuffix = version.startsWith('18') ? '/client': '';
 
     return `
@@ -265,7 +265,7 @@ module.exports = class Command {
       return '';
     }
 
-    return 'import "/node_modules/vite-plugin-nightwatch/nightwatch/describe.js";';
+    return 'import "vite-plugin-nightwatch/nightwatch/describe.js";';
   }
 
   /**
@@ -284,11 +284,11 @@ module.exports = class Command {
 
     return `
 			const isComponentDefaultExported = typeof _csfDescription === 'undefined';
-			
+
 			const commonArgs = isComponentDefaultExported ? {} : (_csfDescription.args || {});
 			const componentArgs = Component.args || {};
       const inlineProps = ${propsToInsert} || {};
-      
+
       const props = { ...commonArgs, ...componentArgs, ...inlineProps };
 		`;
   }
@@ -300,26 +300,26 @@ module.exports = class Command {
 
       ${Command._getReactImports()}
       ${Command._addDescribeMocks(isJSX)}
-      
+
       ${Command._createComponentImport(Component)}
       ${Command._createIndexImport()}
-           
+
       ${Command._unifyReactDOM()}
       ${Command._createProps(props)}
-      
+
       const element = React.createElement(Component, props);
       const canvasElement = document.getElementById('${Command.rootElementId}');
       renderReactElement(element, canvasElement);
-      
+
       window.__nightwatch = {};
-       
+
       window['@component_class'] = Component;
       window['@component_element'] = element;
       window['@@component_props'] = props;
       window['@@canvas_element'] = canvasElement;
       window['@@playfn_result'] = null;
       window.__$$PlayFnError = null;
-      window.__$$PlayFnDone = false;         
+      window.__$$PlayFnDone = false;
     `;
   }
 

nightwatch/commands/mountVueComponent.js

@@ -77,7 +77,7 @@ module.exports = class Command {
         document.body.appendChild(scriptTag);
       }, [`
         const Component = window['@@component_class'];
-        
+
         if (Component && (typeof Component.play == 'function')) {
           try {
             window['@@playfn_result'] = await Component.play({
@@ -130,7 +130,7 @@ module.exports = class Command {
     }
 
     return `
-			import {mount} from '/node_modules/@vue/test-utils/dist/vue-test-utils.esm-browser.js';
+			import {mount} from '@vue/test-utils/dist/vue-test-utils.esm-browser.js';
 			${pluginImports}
 		`;
   }
@@ -149,13 +149,13 @@ module.exports = class Command {
       }
     });
   }
-  
+
   const stubedFetch = sinon.stub(window, 'fetch');
       `;
 
     let mockFetchItemsContent = '';
     if (definitions.length > 0) {
-      mockContent = 'import sinon from \'/node_modules/sinon/pkg/sinon-esm.js\';';
+      mockContent = 'import sinon from \'sinon/pkg/sinon-esm.js\';';
       mockFetchItemsContent = definitions.reduce((prev, mockUrl) => {
         const {body, type = 'fetch'} = mocks[mockUrl];
         if (type === 'fetch') {
@@ -191,9 +191,9 @@ module.exports = class Command {
     return `
       ${Command._getVueImports(opts.plugins)}
       import Component from '${componentName}'
-      
+
       ${Command._getMockContent(opts.mocks)}
-      
+
       let element = mount(Component, {
         attachTo: document.getElementById('app'),
         props: ${JSON.stringify(opts.props)},
@@ -202,10 +202,10 @@ module.exports = class Command {
         }
       });
       window['@@component_element'] = element;
-      window['@@component_class'] = Component; 
+      window['@@component_class'] = Component;
       window['@@playfn_result'] = null;
       window.__$$PlayFnError = null;
-      window.__$$PlayFnDone = false;           
+      window.__$$PlayFnDone = false;
     `;
   }
 };