Merge pull request #15746 from cypress-io/fix/audit-and-update-readmes

docs: update Readme.md

Author: JessicaSachs

npm/react/README.md

@@ -1,4 +1,4 @@
-> A little helper to unit test React components in the open source [Cypress.io](https://www.cypress.io/) E2E test runner **v4.5.0+**
+> A little helper to unit test React components in the open source [Cypress.io](https://www.cypress.io/) test runner **v7.0.0+**
 
 **Jump to:** [Comparison](#comparison), [Blog posts](#blog-posts), [Install](#install), Examples: [basic](#basic-examples), [advanced](#advanced-examples), [full](#full-examples), [external](#external-examples), [Style options](#options), [Code coverage](#code-coverage), [Visual testing](#visual-testing), [Common problems](#common-problems), [Chat](#chat)
 
@@ -8,9 +8,9 @@
 
 ![Example component test](images/dynamic.gif)
 
-- How is this different from [Enzyme](https://github.com/airbnb/enzyme) or [RTL](https://testing-library.com/docs/react-testing-library/intro)? It is similar in functionality BUT runs the component in the real browser with full power of Cypress E2E test runner: [live GUI, full API, screen recording, CI support, cross-platform](https://www.cypress.io/features/), and [visual testing](https://on.cypress.io/visual-testing). Ohh, and the code coverage is built-in!
+- How is this different from [Enzyme](https://github.com/airbnb/enzyme) or [RTL](https://testing-library.com/docs/react-testing-library/intro)? It is similar in functionality BUT runs the component in the real browser with full power of Cypress E2E test runner: [live GUI, full API, screen recording, CI support, cross-platform](https://www.cypress.io/features/), and [visual testing](https://on.cypress.io/visual-testing). 
 - If you like using `@testing-library/react`, you can use `@testing-library/cypress` for the same `findBy`, `queryBy` commands, see one of the examples in the list below
-- Read [My Vision for Component Tests in Cypress](https://glebbahmutov.com/blog/my-vision-for-component-tests/)
+- Read [My Vision for Component Tests in Cypress](https://glebbahmutov.com/blog/my-vision-for-component-tests/) by Gleb Bahmutov
 
 ## Comparison
 
@@ -54,10 +54,10 @@ If you are coming from Enzyme world, check out the [enzyme](cypress/component/ba
 
 ## Install
 
-Requires [Node](https://nodejs.org/en/) version 8 or above.
+Requires [Node](https://nodejs.org/en/) version 12 or above.
 
 ```sh
-npm install --save-dev cypress @cypress/react
+npm install --save-dev cypress @cypress/react @cypress/webpack-dev-server
 ```
 
 ## Init
@@ -371,44 +371,13 @@ Finally, when running tests on the continuous integration service, the true test
 
 </details>
 
-<details id="speed">
-  <summary>Slow bundling</summary>
-
-When you bundle spec file, you are now bundling React, Read DOM and other libraries, which is might be slow. For now, you can disable inline source maps by adding to your Webpack config settings (if available) the following:
-
-```js
-const webpackOptions = {
-  devtool: false,
-}
-```
-
-Keep your eye on issue [#9663](https://github.com/cypress-io/cypress/issues/9663) for more information.
-
-</details>
-
-<details id="missing-code-coverage">
-  <summary>Missing code coverage</summary>
-
-If you are using your custom Webpack, this plugin might be missing code coverage information because the code was not instrumented. We try to insert the `babel-plugin-istanbul` plugin automatically, but your bundling might not use Babel, or configure it differently, preventing plugin insertion. Please let us know by opening an issue with full reproducible details.
-
-See related issue [#141](https://github.com/bahmutov/cypress-react-unit-test/react/issues/141). You can also debug the plugin's behavior by running it with `DEBUG` environment variable, see [#debugging](#debugging) section.
-
-</details>
-
-<details id="gatsby-not-supported">
-  <summary>Gatsby.js projects not supported</summary>
-
-Currently, this project cannot find Webpack settings used by Gatsby.js, thus it cannot bundle specs and application code correctly. Keep an eye on [#307](https://github.com/cypress-io/cypress/issues/9671)
-
-</details>
-
 ## Context Provider usage
 
 React context provider usage and API described in [./docs/providers-and-composition.md](./docs/providers-and-composition.md)
 
 ## Chat
 
-We have a chat workspace at [https://component-testing.slack.com/](https://component-testing.slack.com/), you are welcome to [join us](https://join.slack.com/t/component-testing/shared_invite/zt-h93lrgsl-8WzE8yNQlcZuZji_gA_mtg).
+Come chat with us [on discord](https://discord.gg/7ZHYhZSW) in the #component-testing channel.
 
 ## Development
 
@@ -432,12 +401,9 @@ DEBUG=@cypress/react,find-webpack
 
 Same feature for unit testing components from other frameworks using Cypress
 
-- [cypress-vue-unit-test](https://github.com/bahmutov/cypress-vue-unit-test)
+- [@cypress/vue](https://github.com/cypress-io/cypress/tree/develop/npm/vue)
 - [cypress-cycle-unit-test](https://github.com/bahmutov/cypress-cycle-unit-test)
 - [cypress-svelte-unit-test](https://github.com/bahmutov/cypress-svelte-unit-test)
 - [cypress-angular-unit-test](https://github.com/bahmutov/cypress-angular-unit-test)
 - [cypress-hyperapp-unit-test](https://github.com/bahmutov/cypress-hyperapp-unit-test)
 - [cypress-angularjs-unit-test](https://github.com/bahmutov/cypress-angularjs-unit-test)
-
-[renovate-badge]: https://img.shields.io/badge/renovate-app-blue.svg
-[renovate-app]: https://renovateapp.com/

npm/react/images/dynamic.gif

@@ -1,4 +1,6 @@
-# ⚡️ + 🌲 Cypress Component Testing w/ Vite
+# @cypress/vite-dev-server
+
+> ⚡️ + 🌲 Cypress Component Testing w/ Vite
 
 To install vite in you component testing environment,
 1. Install it `yarn add @cypress/vite-dev-server`
@@ -13,3 +15,46 @@ module.exports = (on, config) => {
   return config
 }
 ```
+
+# @cypress/webpack-dev-server
+
+> **Note** this package is not meant to be used outside of cypress component testing.
+
+Install `@cypress/vue` or `@cypress/react` to get this package working properly
+
+## Architecture
+
+### Cypress server
+
+- Every HTTP request goes to the cypress server which returns an html page. We call "TOP" because of its name in the dev tools
+    This page
+    - renders the list of spec files
+    - And the timetraveling command log
+    - Finally, it renders an AUT Iframe. this iframe calls a url that has 2 parts concatenated.
+        - a prefix: `__cypress/iframes/` 
+        - the path to the current. For example: `src/components/button.spec.tsx`
+- In the cypress server, calls prefixed with `__cypress/iframes/...` will be passed to the dev-server as `__cypress/src/index.html`
+- Every call with the prefix `__cypress/src/` will be passed to the dev-server to deal as is, without changes.
+
+### Dev-server
+
+- Responds to every query with the prefix `__cypress/src/` (base path should be this prefix).
+- Responds to `__cypress/src/index.html` with an html page. 
+    This page
+    - will contain an element `<div id="__cy_root"></div>`. Tis will be used by mount function to mount the app containing the components we want.
+    - will load support files
+    - will load the current spec from the url
+    - will start the test when both files are done loading
+- The server re-runs the tests as soon as the current spec or any dependency is updated by calling an event `devServerEvents.emit('dev-server:compile:success')`
+
+## Vite dev server
+
+- Takes the users `vite.config` and adds base of `__cypress/src/` and a cypress vite plugin.
+- The cypress plugin takes care of
+  - responding to the index.html query with an html page
+  - restarting the tests when files are changed
+- The HTML page calls a script that loads support file and the specs using a native `import()` function
+- Then triggers the loaded tests
+
+Vite is reponsible for compiling and bundling all the files. We use its error overlay to display any transpiling error.
+Omly runtime errors have to be handled through cypress