Merge branch 'master' into main

Author: bahmutov

README.md

@@ -47,6 +47,8 @@ Code coverage | ✅ | ✅
 - [Unit Testing React components with Cypress](https://itnext.io/unit-testing-react-components-with-cypress-4d4cf8cd59a0)
 - [Test React Component with cypress-react-unit-test Example](https://dev.to/bahmutov/test-react-component-with-cypress-react-unit-test-example-4d99)
 - [Tic-Tac-Toe Component Tests](https://glebbahmutov.com/blog/tic-tac-toe-component-tests/)
+- [Using .env and .env.test from React component tests](https://medium.com/@bahmutov/using-env-and-env-test-from-react-component-tests-c11aa2040bc8)
+- [Visual testing for React components using open source tools](https://glebbahmutov.com/blog/open-source-visual-testing-of-components/)
 
 ## Known problems
 
@@ -218,6 +220,7 @@ Repo | Description
 [ejected-react-scripts-example](https://github.com/bahmutov/ejected-react-scripts-example) | Using component testing after ejecting `react-scripts`
 [tic-tac-toe](https://github.com/bahmutov/react-tic-tac-toe-example) | Component and unit tests for Tic-Tac-Toe, read [Tic-Tac-Toe Component Tests](https://glebbahmutov.com/blog/tic-tac-toe-component-tests/)
 [react-hooks-file-upload](https://github.com/bahmutov/react-hooks-file-upload) | Upload a file from the component while stubbing the server
+[react-query-example](https://github.com/bahmutov/react-query-example) | Quick test example for components that use `react-query` with mock clock control
 <!-- prettier-ignore-end -->
 
 To find more examples, see GitHub topic [cypress-react-unit-test-example](https://github.com/topics/cypress-react-unit-test-example)

examples/a11y/README.md

@@ -2,13 +2,33 @@
 
 > Testing component accessibility
 
-```shell
+## Usage
+
+1. Make sure the root project has been built .
+
+```bash
+# in the root of the project
+npm install
+npm run build
+```
+
+2. Run `npm install` in this folder to symlink the `cypress-react-unit-test` dependency.
+
+```bash
+# in this folder
 npm install
+```
+
+3. Start Cypress
+
+```bash
 npm run cy:open
 # or just run headless tests
 npm test
 ```
 
+## Example
+
 Testing components following the [React accessibility guide](https://reactjs.org/docs/accessibility.html) using [cypress-axe](https://github.com/avanslaars/cypress-axe) plugin.
 
 See the spec file [cypress/component/spec.js](cypress/component/spec.js). For example, an `<input>` without a label is caught:

examples/react-scripts-folder/README.md

@@ -1,13 +1,32 @@
 # example: react-scripts-folder
 
-A typical project using `react-scripts` with components in the [src](src) folder and component tests inside [cypress/component](cypress/component) folder. Cypress automatically finds Webpack settings used by `react-scripts` and inserts the component folder name allowing to transpile the component specs the same way the `src` code is transpiled.
+> A typical project using `react-scripts` with components in the [src](src) folder and component tests inside [cypress/component](cypress/component) folder.
 
-Note: run `npm install` in this folder to symlink `cypress-react-unit-test` dependency.
+Cypress automatically finds Webpack settings used by `react-scripts` and inserts the component folder name allowing to transpile the component specs the same way the `src` code is transpiled.
 
-```shell
+![App test](images/app-test.png)
+
+## Usage
+
+1. Make sure the root project has been built .
+
+```bash
+# in the root of the project
+npm install
+npm run build
+```
+
+2. Run `npm install` in this folder to symlink the `cypress-react-unit-test` dependency.
+
+```bash
+# in this folder
+npm install
+```
+
+3. Start Cypress
+
+```bash
 npm run cy:open
 # or just run headless tests
 npm test
 ```
-
-![App test](images/app-test.png)

examples/react-scripts/README.md

@@ -1,16 +1,34 @@
 # example: react-scripts
 
-A typical project using `react-scripts` with components and matching component tests residing in the [src](src) folder.
+> A typical project using `react-scripts` with components and matching component tests residing in the [src](src) folder.
 
-Note: run `npm install` in this folder to symlink the `cypress-react-unit-test` dependency.
+## Usage
 
-```shell
+1. Make sure the root project has been built .
+
+```bash
+# in the root of the project
+npm install
+npm run build
+```
+
+2. Run `npm install` in this folder to symlink the `cypress-react-unit-test` dependency.
+
+```bash
+# in this folder
 npm install
+```
+
+3. Start Cypress
+
+```bash
 npm run cy:open
 # or just run headless tests
 npm test
 ```
 
+## Notes
+
 ![App test](images/app-test.png)
 
 The spec [src/Logo.cy-spec.js](src/Logo.cy-spec.js) directly imports SVG into React spec file. The spec [src/resources.cy-spec.js](src/resources.cy-spec.js) confirm that static resources like SVG and fonts load correctly.

examples/snapshots/README.md

@@ -2,22 +2,38 @@
 
 > Component testing with snapshots using [cypress-plugin-snapshots](https://github.com/meinaart/cypress-plugin-snapshots)
 
-Note: run `npm install` in this folder to symlink `cypress-react-unit-test` dependency.
+Example component taken from [Snapshot Testing React Components with Jest](https://semaphoreci.com/community/tutorials/snapshot-testing-react-components-with-jest)
+
+![Snapshot test](images/snapshot-test.png)
+
+See [cypress/component/PositiveCounter-spec.js](cypress/component/PositiveCounter-spec.js) and saved snapshots in [cypress/component/**snapshots**/](cypress/component/__snapshots__/PositiveCounter-spec.js.snap).
 
-```shell
+## Usage
+
+1. Make sure the root project has been built .
+
+```bash
+# in the root of the project
 npm install
-npm run cy:open
-# or just run headless tests
-npm test
+npm run build
 ```
 
-Example component taken from [Snapshot Testing React Components with Jest](https://semaphoreci.com/community/tutorials/snapshot-testing-react-components-with-jest)
+2. Run `npm install` in this folder to symlink the `cypress-react-unit-test` dependency.
 
-![Snapshot test](images/snapshot-test.png)
+```bash
+# in this folder
+npm install
+```
 
-See [cypress/component/PositiveCounter-spec.js](cypress/component/PositiveCounter-spec.js) and saved snapshots in [cypress/component/**snapshots**/](cypress/component/__snapshots__/PositiveCounter-spec.js.snap).
+3. Start Cypress
+
+```bash
+npm run cy:open
+# or just run headless tests
+npm test
+```
 
-## Failing test
+## Failing tests
 
 If the snapshot contents does not match the saved snapshot file, the test fails. You can click on the snapshot command, review the difference, and if the difference is expected, update the snapshot from the Test Runner's GUI.
 

examples/tailwind/README.md

@@ -1,15 +1,32 @@
 # example: tailwind
 
-Component testing when using [Tailwind CSS](https://tailwindcss.com/), example created following the blog post [Using Tailwind CSS With React](https://medium.com/codingthesmartway-com-blog/using-tailwind-css-with-react-ced163d0e9e9) and Tailwind's own documentation.
+> Component testing when using [Tailwind CSS](https://tailwindcss.com/), example created following the blog post [Using Tailwind CSS With React](https://medium.com/codingthesmartway-com-blog/using-tailwind-css-with-react-ced163d0e9e9) and Tailwind's own documentation.
 
-## Installation
+## Usage
 
-Run `npm install` in this folder to symlink `cypress-react-unit-test` dependency first.
+1. Make sure the root project has been built .
 
-```shell
+```bash
+# in the root of the project
+npm install
+npm run build
+```
+
+2. Run `npm install` in this folder to symlink the `cypress-react-unit-test` dependency.
+
+```bash
+# in this folder
 npm install
 ```
 
+3. Start Cypress
+
+```bash
+npm run cy:open
+# or just run headless tests
+npm test
+```
+
 ## Run tests
 
 You can execute `npm run build:css` to let Tailwind generate `src/styles/main.generated.css` or run Cypress, since this step is set as a pre-test step inside [package.json](package.json).

examples/using-babel/README.md

@@ -1,17 +1,34 @@
 # example: using-babel
 
-Component testing for projects using Babel config
+> Component testing for projects using Babel config
 
-Note: run `npm install` in this folder to symlink `cypress-react-unit-test` dependency.
+![Example component test](images/dynamic.gif)
+
+## Usage
+
+1. Make sure the root project has been built .
+
+```bash
+# in the root of the project
+npm install
+npm run build
+```
+
+2. Run `npm install` in this folder to symlink the `cypress-react-unit-test` dependency.
 
-```shell
+```bash
+# in this folder
+npm install
+```
+
+3. Start Cypress
+
+```bash
 npm run cy:open
-# or run headless tests
+# or just run headless tests
 npm test
 ```
 
-![Example component test](images/dynamic.gif)
-
 ## Specs
 
 See spec files [src/\*.spec.js](src). The specs are bundled using [.babelrc](.babelrc) settings via [cypress/plugins/index.js](cypress/plugins/index.js) file that includes file preprocessor

examples/visual-sudoku/README.md

@@ -1,10 +1,35 @@
 # example: visual tests for Sudoku
 
-This React Sudoku app was cloned from [raravi/sudoku](https://github.com/raravi/sudoku).
+> This React Sudoku app was cloned from [raravi/sudoku](https://github.com/raravi/sudoku).
 
 Visual testing uses open source [palmerhq/cypress-image-snapshot](https://github.com/palmerhq/cypress-image-snapshot) plugin.
 
-Note: run `npm install` in this folder to symlink `cypress-react-unit-test` dependency.
+## Usage
+
+1. Make sure the root project has been built .
+
+```bash
+# in the root of the project
+npm install
+npm run build
+```
+
+2. Run `npm install` in this folder to symlink the `cypress-react-unit-test` dependency.
+
+```bash
+# in this folder
+npm install
+```
+
+3. Start Cypress
+
+```bash
+npm run cy:open
+# or just run headless tests
+npm test
+```
+
+## Running Tests
 
 Example failing test [src/App.cy-spec.js](src/App.cy-spec.js)
 

examples/visual-testing-with-applitools/README.md

@@ -1,12 +1,37 @@
 # example: visual testing using Applitools
 
-Shows how to use Applitools to visually check React charts made with [Victory](https://formidable.com/open-source/victory/) library.
+> An example using Applitools to visually check React charts made with the [Victory](https://formidable.com/open-source/victory/) library.
 
 ![Screenshot](images/eyes.png)
 
 See [src/Chart.spec.js](src/Chart.spec.js)
 
-Note: run `npm install` in this folder to symlink `cypress-react-unit-test` dependency.
+## Usage
+
+1. Make sure the root project has been built .
+
+```bash
+# in the root of the project
+npm install
+npm run build
+```
+
+2. Run `npm install` in this folder to symlink the `cypress-react-unit-test` dependency.
+
+```bash
+# in this folder
+npm install
+```
+
+3. Start Cypress
+
+```bash
+npm run cy:open
+# or just run headless tests
+npm test
+```
+
+## Notes
 
 The `cy.eyes*` commands are ignored during local interactive run. On CI, the `cy.eyes*` send the snapshots to Applitools servers to be analyzed and compared against the baseline images.
 

examples/visual-testing-with-happo/README.md

@@ -6,24 +6,49 @@
 
 > Visual component testing using [Happo.io](https://docs.happo.io/docs/cypress)
 
-Note: run `npm install` in this folder to symlink `cypress-react-unit-test` dependency.
+## Usage
 
-Example PR with code a change where we forgot to update the styles with additional classes: [#210](https://github.com/bahmutov/cypress-react-unit-test/pull/210)
+1. Make sure the root project has been built .
+
+```bash
+# in the root of the project
+npm install
+npm run build
+```
+
+2. Run `npm install` in this folder to symlink the `cypress-react-unit-test` dependency.
+
+```bash
+# in this folder
+npm install
+```
+
+3. Start Cypress
+
+```bash
+npm run cy:open
+# or just run headless tests
+npm test
+```
+
+## Notes
+
+Here's an example PR with code a change where we forgot to update the styles with additional classes: [#210](https://github.com/bahmutov/cypress-react-unit-test/pull/210)
 
 Notice that CircleCI passes the test, because functionally it worked, but the Happo CI check shows a failure:
 
 ![CI checks](images/ci.png)
 
 Happo report shows 3 views:
 
-## Side by side
+### Side by side
 
 ![Side by side view](images/side-by-side.png)
 
-## Diff
+### Diff
 
 ![Diff view](images/diff.gif)
 
-## Swipe
+### Swipe
 
 ![Swipe view](images/swipe.gif)