add example using cypress-react-selector (#197)

Author: bahmutov

README.md

@@ -144,6 +144,7 @@ Spec | Description
 [tutorial](cypress/component/advanced/tutorial) | A few tests adopted from [ReactJS Tutorial](https://reactjs.org/tutorial/tutorial.html)
 [portal](cypress/component/advanced/portal) | Component test for `ReactDOM.createPortal` feature
 [react-bootstrap](cypress/component/advanced/react-bootstrap) | Confirms [react-bootstrap](https://react-bootstrap.github.io/) components are working
+[select React component](cypress/component/advanced/react-book-example/src/components/ProductsList.spec.js) | Uses [cypress-react-selector](https://github.com/abhinaba-ghosh/cypress-react-selector) to find DOM elements using React component name and state values
 <!-- prettier-ignore-end -->
 
 ### Full examples

cypress/component/advanced/react-book-example/src/components/ProductsList.jsx

@@ -1,10 +1,23 @@
 import React from 'react'
 import { getProducts } from '../products'
 
+class AProduct extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      name: props.name,
+    }
+  }
+
+  render() {
+    return <div className="product">{this.state.name}</div>
+  }
+}
+
 const Products = ({ products }) => (
   <React.Fragment>
     {products.map(product => (
-      <div>{product.name}</div>
+      <AProduct key={product.id} name={product.name} />
     ))}
   </React.Fragment>
 )
@@ -25,7 +38,11 @@ class ProductsContainer extends React.Component {
   }
 
   render() {
-    return <Products products={this.state.products} />
+    return (
+      <div className="product-container">
+        <Products products={this.state.products} />
+      </div>
+    )
   }
 }
 

cypress/component/advanced/react-book-example/src/components/ProductsList.spec.js

@@ -1,4 +1,5 @@
 /// <reference types="cypress" />
+import 'cypress-react-selector'
 import { mount } from 'cypress-react-unit-test'
 import React from 'react'
 import ProductsList from './ProductsList.jsx'
@@ -10,9 +11,22 @@ it('renders without crashing', () => {
     .withArgs('http://myapi.com/products')
     .resolves({
       json: cy.stub().resolves({
-        products: [{ id: 1, name: 'Mocked data' }],
+        products: [
+          { id: 1, name: 'First item' },
+          { id: 2, name: 'Second item' },
+        ],
       }),
     })
   mount(<ProductsList />)
-  cy.contains('Mocked data').should('be.visible')
+  cy.contains('First item').should('be.visible')
+  cy.get('.product').should('have.length', 2)
+
+  // use https://github.com/abhinaba-ghosh/cypress-react-selector
+  // to find DOM elements by React component constructor name or state
+  cy.waitForReact(1000, '#cypress-root')
+  cy.react('ProductsContainer').should('have.class', 'product-container')
+  cy.react('AProduct').should('have.length', 2)
+  cy.react('AProduct', { name: 'Second item' })
+    .should('be.visible')
+    .and('have.text', 'Second item')
 })

package-lock.json

@@ -70,6 +70,7 @@
     "css-loader": "2.1.1",
     "cypress": "4.5.0",
     "cypress-plugin-snapshots": "1.4.3",
+    "cypress-react-selector": "0.1.2",
     "date-fns": "2.13.0",
     "husky": "3.1.0",
     "lint-staged": "9.5.0",