fix: make imported @cypress/react working and pass CI (cypress-io#8718)

Co-authored-by: Jessica Sachs <[email protected]>

.eslintignore

@@ -39,3 +39,5 @@ npm/webpack-preprocessor/examples/use-babelrc/cypress/integration/spec.js
 **/.history
 **/.cy
 **/.git
+
+/npm/react/bin/*

.gitignore

@@ -312,4 +312,5 @@ $RECYCLE.BIN/
 # Windows shortcuts
 *.lnk
 
+/npm/react/bin/*
 # End of https://www.gitignore.io/api/osx,git,node,windows,intellij,linux

circle.yml

@@ -383,8 +383,7 @@ commands:
     steps:
       - run:
           name: "Waiting on Circle CI jobs: <<parameters.job-names>>"
-          command: node ./scripts/wait-on-circle-jobs.js --job-names="<<parameters.job-names>>"
-
+          command: node ./scripts/wait-on-circle-jobs.js --job-names="<<parameters.job-names>>"q  
 jobs:
   ## code checkout and yarn installs
   build:
@@ -1066,6 +1065,66 @@ jobs:
       - run:
           name: Release
           command: yarn semantic-release @cypress/vue
+
+  npm-react:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Build
+          command: yarn workspace @cypress/react build
+      - run:
+          name: Run unit test
+          command: yarn workspace @cypress/react test:unit 
+      - run:
+          name: Run tests
+          command: yarn workspace @cypress/react test
+      - store-npm-logs
+      - persist_to_workspace:
+          root: ~/
+          paths: cypress/npm/react
+
+  npm-react-e2e-example:
+    <<: *defaults
+    description: Run react component testing end-to-end examples
+    parameters:
+      executor:
+        description: Executor name to use
+        type: executor
+        default: cy-doc
+      path:
+        description: relative to npm/react path of example
+        type: string
+    steps:
+      - attach_workspace:
+          at: ~/
+      - restore_cache:
+          name: Restore Cache
+          keys:
+            - yarn-packages-{{ checksum "npm/react/<<parameters.path>>/yarn.lock" }}
+      - run:
+          name: Install Dependencies
+          command: yarn install --frozen-lockfile
+          working_directory: npm/react/<<parameters.path>>
+      - save_cache:
+          name: Save Cache
+          key: yarn-packages-{{ checksum "npm/react/<<parameters.path>>/yarn.lock" }}
+          paths:
+            - ~/.cache
+      - run: 
+          name: Run e2e example tests
+          command: yarn test
+          working_directory: npm/react/<<parameters.path>>
+
+  npm-react-release:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Release
+          command: yarn semantic-release @cypress/react
 
   npm-eslint-plugin-dev:
     <<: *defaults
@@ -1885,6 +1944,87 @@ linux-workflow: &linux-workflow
           - build
           - npm-vue
 
+    - npm-react:
+        requires:
+          - build
+
+    # Run tests for end-to-end react component tests examples
+    - npm-react-e2e-example:
+        name: React + Axe component testing
+        path: examples/a11y
+        requires:
+          - npm-react
+    - npm-react-e2e-example:
+        name: React + Next component testing
+        path: examples/nextjs
+        requires:
+          - npm-react
+    - npm-react-e2e-example:
+        name: React + CRA component testing
+        path: examples/react-scripts
+        requires:
+          - npm-react
+    - npm-react-e2e-example:
+        name: React + CRA folder component testing
+        path: examples/react-scripts-folder
+        requires:
+          - npm-react
+    - npm-react-e2e-example:
+        name: React + Rollup component testing
+        path: examples/rollup
+        requires:
+          - npm-react
+    - npm-react-e2e-example:
+        name: React + Sass + TS component testing
+        path: examples/sass-and-ts
+        requires:
+          - npm-react
+    - npm-react-e2e-example:
+        name: React + Snapshots component testing
+        path: examples/snapshots
+        requires:
+          - npm-react
+    - npm-react-e2e-example:
+        name: React + Tailwind component testing
+        path: examples/tailwind
+        requires:
+          - npm-react
+    # Requires Applitools key in the env
+    # - npm-react-e2e-example:
+    #     name: React + Applitools component testing
+    #     path: examples/visual-testing-with-applitools
+    #     requires:
+    #       - npm-react
+    - npm-react-e2e-example:
+        name: React + Percy component testing
+        path: examples/visual-testing-with-percy
+        requires:
+          - npm-react
+    - npm-react-e2e-example:
+        name: React + Happo component testing
+        path: examples/visual-testing-with-happo
+        requires:
+          - npm-react
+    - npm-react-e2e-example:
+        name: React + Webpack file component testing
+        path: examples/webpack-file
+        requires:
+          - npm-react
+    - npm-react-e2e-example:
+        name: React + Webpack options component testing
+        path: examples/webpack-options
+        requires:
+          - npm-react
+
+    - npm-react-release:
+        filters:
+          branches:
+            only:
+              - master
+        requires:
+          - build
+          - npm-vue
+
     - npm-eslint-plugin-dev:
         requires:
           - build

npm/react/.eslintrc

@@ -0,0 +1,52 @@
+{
+  "plugins": [
+    "cypress",
+    "@cypress/dev"
+  ],
+  "extends": [
+    "plugin:@cypress/dev/general",
+    "plugin:@cypress/dev/tests",
+    "plugin:@cypress/dev/react"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "env": {
+    "cypress/globals": true
+  },
+  "globals": {
+    "jest": "readonly"
+  },
+  "rules": {
+    "no-console": "off",
+    "mocha/no-global-tests": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "react/jsx-filename-extension": [
+      "warn",
+      {
+        "extensions": [
+          ".js",
+          ".jsx",
+          ".tsx"
+        ]
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": [
+        "lib/*"
+      ],
+      "rules": {
+        "no-console": 1
+      }
+    },
+    {
+      "files": [
+        "**/*.json"
+      ],
+      "rules": {
+        "quotes": "off",
+        "comma-dangle": "off"
+      }
+    }
+  ]
+}

npm/react/.mocharc.json

@@ -0,0 +1,7 @@
+{
+  "watch-ignore": [
+    "node_modules"
+  ],
+  "require": "ts-node/register",
+  "exit": true
+}