{"id":18728578,"url":"https://github.com/nightwatchjs/nightwatch-plugin-react","last_synced_at":"2025-04-12T16:33:21.665Z","repository":{"id":40943562,"uuid":"457393876","full_name":"nightwatchjs/nightwatch-plugin-react","owner":"nightwatchjs","description":"Nightwatch plugin which adds support for React component testing using the Vite dev server. Requires Nightwatch 2.3+","archived":false,"fork":false,"pushed_at":"2024-08-16T16:48:53.000Z","size":1270,"stargazers_count":6,"open_issues_count":2,"forks_count":9,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-30T00:55:18.027Z","etag":null,"topics":["component-testing","nightwatch","nightwatch-plugin","nightwatchjs","react"],"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,"dei":null}},"created_at":"2022-02-09T14:31:17.000Z","updated_at":"2024-08-27T14:33:38.000Z","dependencies_parsed_at":"2024-01-29T19:30:27.993Z","dependency_job_id":"55cb5031-a9c5-4663-a464-28110467fb9e","html_url":"https://github.com/nightwatchjs/nightwatch-plugin-react","commit_stats":{"total_commits":71,"total_committers":6,"mean_commits":"11.833333333333334","dds":0.3098591549295775,"last_synced_commit":"3f4e037cb853bf8bd7ca26acbab7a5820aa20806"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nightwatchjs%2Fnightwatch-plugin-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nightwatchjs%2Fnightwatch-plugin-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nightwatchjs%2Fnightwatch-plugin-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nightwatchjs%2Fnightwatch-plugin-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nightwatchjs","download_url":"https://codeload.github.com/nightwatchjs/nightwatch-plugin-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223200779,"owners_count":17105014,"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","nightwatch","nightwatch-plugin","nightwatchjs","react"],"created_at":"2024-11-07T14:22:00.125Z","updated_at":"2024-11-07T14:22:00.878Z","avatar_url":"https://github.com/nightwatchjs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @nightwatch/react\n\u003cp align=center\u003e\n  \u003cimg alt=\"Nightwatch.js Logo\" src=\"https://raw.githubusercontent.com/nightwatchjs/nightwatch-plugin-react/main/.github/assets/nightwatch-logo.png\" width=200 /\u003e\n  \u003cimg alt=\"React Logo\" src=\"https://raw.githubusercontent.com/nightwatchjs/nightwatch-plugin-react/main/.github/assets/react-logo.png\" width=200 /\u003e\n\u003c/p\u003e\n\n[![Build Status][build-badge]][build]\n[![version][version-badge]][package]\n[![Discord][discord-badge]][discord]\n[![MIT License][license-badge]][license]\n\nOfficial Nightwatch plugin which adds component testing support for React apps. It uses the [Vite](https://vitejs.dev/) dev server under the hood and [vite-plugin-nightwatch](https://github.com/nightwatchjs/vite-plugin-nightwatch). Requires Nightwatch 2.4+\n\n```\nnpm install @nightwatch/react\n```\n\n## Usage:\n\nUpdate your [Nightwatch configuration](https://nightwatchjs.org/guide/configuration/overview.html) and add the plugin to the list:\n\n```js\nmodule.exports = {\n  plugins: ['@nightwatch/react']\n  \n  // other nightwatch settings...\n}\n```\n\n### Already using Vite in your project?\n\nIf 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. \n\nCheck the [vite-plugin-nightwatch](https://github.com/nightwatchjs/vite-plugin-nightwatch) project for more configuration options.\n\nUpdate the `vite.config.js` and add the `vite-plugin-nightwatch` plugin:\n\n```js\n// vite.config.js\n\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\n### Configuration\nWe’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.\n\n#### Vite dev server\nBy 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.\n\nThis is common to other component testing plugins that are based on Vite, such as the `@nightwatch/vue` plugin.\n\n```js\n// nightwatch.conf.js\n\nmodule.exports = {\n  plugins: ['@nightwatch/react'],\n  vite_dev_server: {\n    start_vite: true,\n    port: 5173\n  }\n}\n```\n\n#### Plugin options\nThe plugin accepts a few config options which can be set when working with an existing `vite.config.js` file in the project.\n\n##### - `renderPage`\nSpecify 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.\n\n```js\n// vite.config.js\n\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 React component tests.\n\n### - browser.mountComponent(`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; an inline string can be also used\n- `callback` – an optional callback function which will be called with the component element\n\n#### Example:\n```js\nconst component = await browser.mountComponent('/src/components/Form.jsx')\n```\n\n```js\nconst component = await browser.mountComponent('/src/components/Form.jsx', {\n  prop: 'value'\n})\n```\n\nA 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.\n```js\nconst component = await browser.mountComponent('/src/components/UserInfo.jsx', function () {\n  return {\n    date: new Date(),\n    text: 'I hope you enjoy reading Ulysses!',\n    author: {\n      name: 'Leopold Bloom',\n      avatarUrl: 'https://upload.wikimedia.org/wikipedia/commons/5/52/Poldy.png'\n    }\n  }\n});\n```\n\n### - browser.launchComponentRenderer():\nThis will call `browser.navigateTo('/test_renderer/')` 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}/test_renderer`, 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`: should be set to `'react'`\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 React from 'react'\nimport ReactDOM from 'react-dom'\nimport Component from '/test/components/Form.jsx'\n\nconst element = React.createElement(Component, {});\nReactDOM.render(element, document.getElementById('app'));\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, since Nightwatch v2.4 we provide several ways to inspect and debug the mounted component using the browser devtools console. Refer to the guide page on our docs website for more details:\nhttps://nightwatchjs.org/guide/component-testing/debugging.html\n\n### Example:\n```sh\nnpx nightwatch test/src/userInfoTest.js --devtools --debug\n```\n\n## Run tests:\n\nTests for this project are written in Nightwatch so you can inspect them as examples, located in the [test/src] folder.\n\nRun them with::\n```sh\nnpm test \n```\n\n### Example project\nWe've put together a basic To-do app written in React and built on top of Vite which can be used as a boilerplate. It can be found at [nightwatchjs-community/todo-react](https://github.com/nightwatchjs-community/todo-react).\n\n\n## License\nMIT\n\n[build-badge]: https://github.com/nightwatchjs/nightwatch-plugin-react/actions/workflows/node.js.yml/badge.svg?branch=main\n[build]: https://github.com/nightwatchjs/nightwatch-plugin-react/actions/workflows/node.js.yml\n[version-badge]: https://img.shields.io/npm/v/@nightwatch/react.svg?style=flat-square\n[package]: https://www.npmjs.com/package/@nightwatch/react\n[license-badge]: https://img.shields.io/npm/l/@nightwatch/react.svg?style=flat-square\n[license]: https://github.com/nightwatchjs/nightwatch-plugin-react/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%2Fnightwatch-plugin-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnightwatchjs%2Fnightwatch-plugin-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnightwatchjs%2Fnightwatch-plugin-react/lists"}