added is-ci

cypress.config.ts

@@ -1,4 +1,6 @@
 import { defineConfig } from 'cypress'
+import plugins from './cypress/support/plugins'
+import tasks from './cypress/support/tasks'
 
 export default defineConfig({
   // TODO: there is 1 test in CI that fails with this on, when not parallelized
@@ -12,13 +14,19 @@ export default defineConfig({
     openMode: 0
   },
   e2e: {
-    setupNodeEvents(on, config) {},
+    setupNodeEvents(on, config) {
+      tasks(on)
+      return plugins(on, config)
+    },
     // baseUrl: 'http://localhost:3000', // need to test index.html in another test...
     specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}'
   },
   component: {
-    // experimentalJustInTimeCompile: true,
-    setupNodeEvents(on, config) {},
+    experimentalJustInTimeCompile: true,
+    setupNodeEvents(on, config) {
+      tasks(on)
+      return plugins(on, config)
+    },
     devServer: {
       framework: 'create-react-app',
       bundler: 'webpack'

cypress/component/basarat-codes/useEffect-twice/useEffect-twice.cy.tsx

@@ -1,3 +1,4 @@
+import '@cypress/skip-test/support'
 import App from './App'
 
 function compareTimers(secondsPassed = 0) {
@@ -6,7 +7,12 @@ function compareTimers(secondsPassed = 0) {
 }
 
 // test is flakey locally and in CI
-describe.skip('useEffect twice', () => {
+describe('useEffect twice', () => {
+  before(() => {
+    cy.task('isCi').then((isCi) => {
+      cy.skipOn(isCi as boolean)
+    })
+  })
   it('the timers should stay in sync', () => {
     cy.clock()
     cy.mount(<App />)

cypress/component/hooks/kent.c.dodds-epic-react/07.suspense/02.data-fetching/suspense-data-fetching.cy.js

@@ -1,34 +1,42 @@
+import '@cypress/skip-test/support'
 import App from './suspense-data-fetching'
 
 // does not work reliably in CI
-it.skip(
-  'suspense, data fetching, error boundary',
-  { viewportHeight: 600, defaultCommandTimeout: 15000 },
-  () => {
-    cy.intercept('POST', 'https://graphql-pokemon2.vercel.app/', (req) =>
-      req.reply({
-        body: {
-          data: {
-            pokemon: {
-              id: 'UG9rZW1vbjowMjU=',
-              number: '025',
-              name: 'Pikachu',
-              image: 'https://img.pokemondb.net/artwork/pikachu.jpg',
-              attacks: {
-                special: [
-                  { name: 'Discharge', type: 'Electric', damage: 35 },
-                  { name: 'Thunder', type: 'Electric', damage: 100 },
-                  { name: 'Thunderbolt', type: 'Electric', damage: 55 }
-                ]
+describe('Suspense, data fetching, error boundary', () => {
+  before(() => {
+    cy.task('isCi').then((isCi) => {
+      cy.skipOn(isCi)
+    })
+  })
+  it(
+    'suspense, data fetching, error boundary',
+    { viewportHeight: 600, defaultCommandTimeout: 15000 },
+    () => {
+      cy.intercept('POST', 'https://graphql-pokemon2.vercel.app/', (req) =>
+        req.reply({
+          body: {
+            data: {
+              pokemon: {
+                id: 'UG9rZW1vbjowMjU=',
+                number: '025',
+                name: 'Pikachu',
+                image: 'https://img.pokemondb.net/artwork/pikachu.jpg',
+                attacks: {
+                  special: [
+                    { name: 'Discharge', type: 'Electric', damage: 35 },
+                    { name: 'Thunder', type: 'Electric', damage: 100 },
+                    { name: 'Thunderbolt', type: 'Electric', damage: 55 }
+                  ]
+                }
               }
             }
           }
-        }
-      })
-    ).as('pika')
-    cy.mount(<App />)
+        })
+      ).as('pika')
+      cy.mount(<App />)
 
-    cy.wait('@pika', { timeout: 15000 })
-    cy.getByCy('pokemon-info').should('be.visible')
-  }
-)
+      cy.wait('@pika', { timeout: 15000 })
+      cy.getByCy('pokemon-info').should('be.visible')
+    }
+  )
+})

cypress/component/hooks/usehooks.com/useLockBodyScroll/use-lock-body-scroll.comp-spec.jsx

@@ -1,9 +1,17 @@
+import '@cypress/skip-test/support'
 import App from './App'
-
 import './styles.css'
 import { recurse } from 'cypress-recurse'
 
 describe('App', { viewportHeight: 1000 }, () => {
+  before(() => {
+    // seems to fail in CI
+    // https://cloud.cypress.io/projects/62pyqm/runs/1376/test-results/d17943ec-48d2-40b6-9c4f-5afeebb567f8/replay?actions=%5B%5D&att=3&browsers=%5B%5D&groups=%5B%5D&isFlaky=%5B%5D&modificationDateRange=%7B%22startDate%22%3A%221970-01-01%22%2C%22endDate%22%3A%222038-01-19%22%7D&orderBy=EXECUTION_ORDER&oses=%5B%5D&specs=%5B%5D&statuses=%5B%5D&testingTypesEnum=%5B%5D&ts=1725050309279.6455
+    cy.task('isCi').then((isCi) => {
+      cy.skipOn(isCi)
+    })
+  })
+
   it('should', () => {
     cy.mount(<App />)
 

cypress/component/redux-FP-arch-with-React-Redux-book/ch13-newsApi-genericFlowWithBackend-Rtap/App.cy.jsx

@@ -1,7 +1,13 @@
+import '@cypress/skip-test/support'
 import App from './App'
 
 // not reliable in CI. Painful to stub the network. Just run it locally
-describe.skip('News app', () => {
+describe('News app', () => {
+  before(() => {
+    cy.task('isCi').then((isCi) => {
+      cy.skipOn(isCi)
+    })
+  })
   it('should render correctly', () => {
     cy.intercept('GET', 'https://hacker-news.firebaseio.com/**').as('api-call')
     cy.mount(<App />)

cypress/index.d.ts

@@ -20,6 +20,14 @@ declare global {
        * @param component React Node to mount
        * @param options Additional options to pass into mount
        */
+
+      /** https://www.npmjs.com/package/@cypress/skip-test
+       * `cy.skipOn('localhost')` */
+      skipOn(nameOrFlag: string | boolean | (() => boolean), cb?: () => void): Chainable<Subject>
+
+      /** https://www.npmjs.com/package/@cypress/skip-test
+       * `cy.onlyOn('localhost')` */
+      onlyOn(nameOrFlag: string | boolean | (() => boolean), cb?: () => void): Chainable<Subject>
     }
   }
 }

cypress/support/commands.ts

@@ -24,9 +24,14 @@
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 
-Cypress.Commands.add('getByCy', (selector, ...args) =>
-  cy.get(`[data-cy="${selector}"]`, ...args)
-)
+import './commands'
+import '@testing-library/cypress/add-commands'
+import 'cypress-real-events/support'
+import 'cypress-react-app-actions'
+const registerCypressGrep = require('@bahmutov/cy-grep')
+registerCypressGrep()
+
+Cypress.Commands.add('getByCy', (selector, ...args) => cy.get(`[data-cy="${selector}"]`, ...args))
 
 Cypress.Commands.add('getByCyLike', (selector, ...args) =>
   cy.get(`[data-cy*=${selector}]`, ...args)

cypress/support/component.tsx

@@ -1,29 +1,3 @@
-// ***********************************************************
-// This example support/component.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-import '@testing-library/cypress/add-commands'
-import 'cypress-real-events/support'
-import 'cypress-react-app-actions'
-import 'cypress-each'
-// import 'cypress-axe'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
-
 import { mount } from 'cypress/react18'
 
 // Augment the Cypress namespace to include type definitions for

cypress/support/e2e.ts

@@ -1,24 +0,0 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-import '@testing-library/cypress/add-commands'
-import 'cypress-real-events/support'
-import 'cypress-react-app-actions'
-// import 'cypress-axe'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

cypress/support/is-ci.ts

@@ -0,0 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const isCI = require('is-ci')
+
+const isCi = () => isCI
+
+export default isCi

cypress/support/log.ts

@@ -0,0 +1,10 @@
+// an example task that logs to the CLI console
+// cy.task('log', 'e2e sanity passed')
+
+const log = (x: string) => {
+  console.log(x)
+
+  return null
+}
+
+export default log

cypress/support/plugins.ts

@@ -0,0 +1,14 @@
+const cyGrep = require('@bahmutov/cy-grep/src/plugin')
+
+/**
+ * The collection of plugins to use with Cypress
+ * @param on  `on` is used to hook into various events Cypress emits
+ * @param config  `config` is the resolved Cypress config
+ */
+export default function plugins(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) {
+  return {
+    // add plugins here
+    // ...cyDataSession(on, config), // example
+    ...cyGrep(config)
+  }
+}

cypress/support/tasks.ts

@@ -0,0 +1,12 @@
+import log from './log'
+import isCi from './is-ci'
+
+/**
+ * The collection of tasks to use with `cy.task()`
+ * @param on `on` is used to hook into various events Cypress emits
+ */
+export default function tasks(on: Cypress.PluginEvents) {
+  on('task', { log })
+  on('task', { isCi })
+  // add tasks here
+}

package.json

@@ -80,6 +80,8 @@
     ]
   },
   "devDependencies": {
+    "@bahmutov/cy-grep": "^1.11.3",
+    "@cypress/skip-test": "^2.6.1",
     "@testing-library/cypress": "9.0.0",
     "@types/faker": "6.6.8",
     "@types/ramda": "0.29.3",