{"id":18728584,"url":"https://github.com/nightwatchjs/vite-plugin-nightwatch","last_synced_at":"2025-04-12T16:33:20.380Z","repository":{"id":42522475,"uuid":"438230768","full_name":"nightwatchjs/vite-plugin-nightwatch","owner":"nightwatchjs","description":"Component testing plugin that integrates Vite with Nightwatch.js. Supports Vue and React components.","archived":false,"fork":false,"pushed_at":"2024-01-10T20:27:02.000Z","size":283,"stargazers_count":16,"open_issues_count":12,"forks_count":10,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-25T06:27:52.014Z","etag":null,"topics":["component-testing","javascript","nightwatch","nightwatchjs","react","vue"],"latest_commit_sha":null,"homepage":"https://nightwatchjs.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nightwatchjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-12-14T11:40:55.000Z","updated_at":"2024-11-06T11:27:46.000Z","dependencies_parsed_at":"2024-01-13T05:10:36.828Z","dependency_job_id":"c031b363-95d0-4168-b324-e03ca4df15c6","html_url":"https://github.com/nightwatchjs/vite-plugin-nightwatch","commit_stats":{"total_commits":111,"total_committers":8,"mean_commits":13.875,"dds":"0.29729729729729726","last_synced_commit":"fc07e8329b2826d237c6c5b1abfd6d29cd4d154e"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nightwatchjs%2Fvite-plugin-nightwatch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nightwatchjs%2Fvite-plugin-nightwatch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nightwatchjs%2Fvite-plugin-nightwatch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nightwatchjs%2Fvite-plugin-nightwatch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nightwatchjs","download_url":"https://codeload.github.com/nightwatchjs/vite-plugin-nightwatch/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246187506,"owners_count":20737527,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-testing","javascript","nightwatch","nightwatchjs","react","vue"],"created_at":"2024-11-07T14:22:01.140Z","updated_at":"2025-04-12T16:33:20.357Z","avatar_url":"https://github.com/nightwatchjs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vite-plugin-nightwatch\n\nComponent testing plugin that integrates [Vite](https://vitejs.dev/) with [Nightwatch.js](https://nightwatchjs.org/). Supports Vue and React components.\n\n[![Vue Tests Status][build-badge]][build]\n[![version][version-badge]][package]\n[![Discord][discord-badge]][discord]\n[![MIT License][license-badge]][license]\n\n```\nnpm install vite-plugin-nightwatch\n```\n\n## Usage:\nUpdate your [Vite configuration](https://vitejs.dev/config/):\n\n### \n```js\nimport nightwatchPlugin from 'vite-plugin-nightwatch'\n\nexport default {\n  plugins: [\n    // ... other plugins, such as vue() or react()\n    nightwatchPlugin()\n  ]\n}\n```\n\nNightwatch 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.\n\nTo start the Vite dev server, in your project run:\n```sh\nnpm run dev\n```\n\n## Configuration:\nThe plugin accepts a few config options:\n\n### - componentType:\nSpecify the type of component to be tested. Possible values:\n- `vue` (default, if none specified)\n- `react`\n\n```js\nexport default {\n  plugins: [\n    // ... other plugins, such as vue() or react()\n    nightwatchPlugin({\n      componentType: 'vue'\n    })\n  ]\n}\n```\n\n### - renderPage:\nSpecify 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.\n\n```js\nexport default {\n  plugins: [\n    // ... other plugins, such as vue() or react()\n    nightwatchPlugin({\n      renderPage: './src/test_renderer.html'\n    })\n  ]\n}\n```\n\n## API Commands\nThis plugin includes a few Nightwatch commands which can be used while writing tests.\n\n### - browser.mountVueComponent(`componentPath` ,`[options]`, `[callback]`):\n**Parameters:**\n- `componentPath` – location of the component file (`.vue`) to be mounted\n- `options` – this can include:\n  - `props` - properties to be passed to the Vue component, this will be serialized to JSON\n  - `plugins`: if needed, a store (VueX or Pinia) and a router can be loaded together with the component\n  - `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.  \n- `callback` – an optional callback function which will be called with the component element\n\n#### Example:\n```js\nconst component = await browser.mountVueComponent('/src/components/Form.vue', {\n  plugins: {\n    store: '/src/lib/store.js',\n    router: '/src/lib/router.js'\n  },\n\n  mocks: {\n    '/api/get-user': {\n      type: 'fetch',\n      body: {\n        data: {\n          \"firstName\": \"Jimmy\",\n          \"lastName\": \"Hendrix\"\n        }\n      }\n    }\n  }\n})\n```\n\n### - browser.mountReactComponent(`componentPath`, `[props]`, `[callback]`):\n**Parameters:**\n- `componentPath` – location of the component file (`.jsx`) to be mounted\n- `props` – properties to be passed to the React component, this will be serialized to JSON\n- `callback` – an optional callback function which will be called with the component element\n\n#### Example:\n```js\nconst component = await browser.mountReactComponent('/src/components/Form.jsx')\n```\n\n### - browser.launchComponentRenderer():\nThis will call `browser.navigateTo('/nightwatch/')` and open the browser. Needs to be used before the `.importScript()` command, if used.\n\nYou 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. \n\n### - browser.importScript(`scriptPath`, `[options]`, `[callback]`):\n**Parameters:**\n- `scriptPath` – location of the script file to inject into the page which will render the component; needs to be written in ESM format\n- `options` – this can include:\n  - `scriptType`: the `type` attribute to be set on the `\u003cscript\u003e` tag (default is `module`)\n  - `componentType`: either `vue` or `react` (default is `vue`)\n- `callback` – an optional callback function which will be called with the component element\n\n#### Example:\n```js\nconst formComponent = await browser\n  .launchComponentRenderer()\n  .importScript('/test/lib/scriptToImport.js');\n```\n\nExample `scriptToImport.js`:\n```js\nimport {mount} from '/node_modules/@vue/test-utils/dist/vue-test-utils.esm-browser.js'\nimport Component from '/test/components/vue/Form.vue'\n\nlet element = mount(Component, {\n attachTo: document.getElementById('app'),\n global: {\n   plugins: []\n }\n});\n\n// This will be used by Nightwatch to inspect properties of this component\nwindow['@@component_element'] = element;\n```\n\n## Debugging Component Tests\nDebugging component tests in Nightwatch isn't as straightforward as debugging a regular Node.js application or service, since Nightwatch needs to inject the code to render to component into the browser.\n\nHowever, for when running the tests in Chrome, you can use the DevTools to do debugging directly in the browser. For this purpose, Nightwatch provide 2 CLI flags:\n- `--devtools` - when this is on, the Chrome DevTools will open automatically\n- `--debug` - this will cause the test execution to pause right after the component is rendered\n\n\n## Running the Vite dev-server programmatically from Nightwatch \nIt is also possible to start the Vite dev server from the Nightwatch global `before` hook and close it in the `after` hook.\n\nWe are doing that as part of the tests for this plugin. Here's how your external `globals.js` file should look like:\n\n__globals.js__\n```js\nconst path = require('path');\nconst vite = require('./vite.js');\n\nconst startViteForVue = function() {\n  return vite.start({\n    configFile: path.join(__dirname, 'vite.config-vue.js')\n  });\n}\n\nconst startViteForReact = function() {\n  return vite.start({\n    configFile: path.join(__dirname, 'vite.config-react.js')\n  });\n}\n\nlet viteServer;\nmodule.exports = {\n  async before() {\n    switch (this.componentType) {\n      case 'react':\n        viteServer = await startViteForReact();\n        break;\n      case 'vue':\n        viteServer = await startViteForVue();\n        break;\n    }\n\n    const port = viteServer.config.server.port;\n\n    // set the launch url dynamically\n    this.launchUrl = `http://localhost:${port}`;\n  },\n\n  async after() {\n    await viteServer.close();\n  }\n}\n```\n\nAlso inspect the included [nightwatch.conf.js](nightwatch.conf.js) and the [vite dev server](test/lib/vite.js) start up script.\n\n## Run tests:\n\nTests for this project are written in Nightwatch so you can inspect them as examples, located in the [tests/specs] folder.\n\nTo run the Vue component tests:\n\n```sh\nnpm test\n```\n\nTo run the React component tests:\n\n```sh\nnpm run test-react\n```\n \n\n## License\nMIT\n\n[build-badge]: https://github.com/nightwatchjs/vite-plugin-nightwatch/actions/workflows/tests.yml/badge.svg?branch=main\n[build]: https://github.com/nightwatchjs/vite-plugin-nightwatch/actions/workflows/vue-tests.yml\n[version-badge]: https://img.shields.io/npm/v/vite-plugin-nightwatch.svg?style=flat-square\n[package]: https://www.npmjs.com/package/vite-plugin-nightwatch\n[license-badge]: https://img.shields.io/npm/l/vite-plugin-nightwatch.svg?style=flat-square\n[license]: https://github.com/nightwatchjs/vite-plugin-nightwatch/blob/main/LICENSE\n[discord-badge]: https://img.shields.io/discord/618399631038218240.svg?color=7389D8\u0026labelColor=6A7EC2\u0026logo=discord\u0026logoColor=ffffff\u0026style=flat-square\n[discord]: https://discord.gg/SN8Da2X\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnightwatchjs%2Fvite-plugin-nightwatch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnightwatchjs%2Fvite-plugin-nightwatch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnightwatchjs%2Fvite-plugin-nightwatch/lists"}