Add example with test retries built-in (#361)

README.md

@@ -166,6 +166,7 @@ Spec | Description
 [react-router-v6](cypress/component/advanced/react-router-v6) | Example testing a [React Router v6](https://github.com/ReactTraining/react-router)
 [renderless](cypress/component/advanced/renderless) | Testing a component that does not need to render itself into the DOM
 [set-timeout-example](cypress/component/advanced/set-timeout-example) | Control the clock with `cy.tick` and test loading components that use `setTimeout`
+[test-retries](cypress/component/advanced/test-retries) | This component is compatible with [Cypress Test Retries](https://github.com/cypress-io/cypress/pull/3968)
 [testing-lib-example](cypress/component/advanced/testing-lib-example) | A spec adopted from [@testing-library/react](https://testing-library.com/docs/react-testing-library/example-intro) that uses [@testing-library/cypress](https://testing-library.com/docs/cypress-testing-library/intro)
 [timers](cypress/component/advanced/timers) | Testing components that set timers, adopted from [ReactJS Testing recipes](https://reactjs.org/docs/testing-recipes.html#timers)
 [tutorial](cypress/component/advanced/tutorial) | A few tests adopted from [ReactJS Tutorial](https://reactjs.org/tutorial/tutorial.html), including Tic-Tac-Toe game

cypress/component/advanced/test-retries/README.md

@@ -0,0 +1,22 @@
+# test retries
+
+This plugin is compatible with Cypress [Test Retries](https://github.com/cypress-io/cypress/pull/3968). For example in [spec.js](spec.js) we fail the test on purpose until the desired UI happens
+
+```js
+const Hello = () => {
+  // this is how you can get the current retry number
+  // attempt 1: (first test execution) retry = 0
+  // attempt 2: (second test execution) retry = 1
+  // attempt 3: retry = 2,
+  // etc
+  const n = cy.state('test').currentRetry ? cy.state('test').currentRetry() : 0
+  return <div>retry {n}</div>
+}
+it('retries', { retries: 3 }, () => {
+  mount(<Hello />)
+  // now let's fail the test - it will retry several times and pass
+  cy.contains('retry 3', { timeout: 1500 })
+})
+```
+
+![Retries in action](images/retries.gif)

cypress/component/advanced/test-retries/spec.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+
+// test retries from
+// https://github.com/cypress-io/cypress/pull/3968
+// you can skip the tests if there is no retries feature
+const describeOrSkip = Cypress.getTestRetries ? describe : describe.skip
+describeOrSkip('Test', () => {
+  const Hello = () => {
+    // this is how you can get the current retry number
+    // attempt 1: (first test execution) retry = 0
+    // attempt 2: (second test execution) retry = 1
+    // attempt 3: retry = 2,
+    // etc
+    const n = cy.state('test').currentRetry
+      ? cy.state('test').currentRetry()
+      : 0
+    return <div>retry {n}</div>
+  }
+
+  it('does not retry', { retries: 0 }, () => {
+    mount(<Hello />)
+    cy.contains('retry 0')
+
+    // now let's fail the test - it won't retry it
+    // enable manually to observe
+    // cy.contains('retry 1')
+  })
+
+  it('retries', { retries: 3 }, () => {
+    mount(<Hello />)
+    // now let's fail the test - it will retry several times and pass
+    cy.contains('retry 3', { timeout: 1500 })
+  })
+})