add localStorage hooks example

Author: bahmutov

README.md

@@ -156,6 +156,7 @@ Spec | Description
 [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
+[use-local-storage](cypress/component/advanced/use-local-storage) | Use hooks to load and save items into `localStorage`
 [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

cypress/component/advanced/use-local-storage/App.jsx

@@ -0,0 +1,26 @@
+import React, { useState, useEffect } from 'react'
+
+export default function App() {
+  const [cart, setCart] = useState(
+    JSON.parse(localStorage.getItem('cart')) || ['kiwi 🥝'],
+  )
+
+  const addJuice = () => {
+    const updatedCart = cart.concat('juice 🧃')
+    setCart(updatedCart)
+    localStorage.setItem('cart', JSON.stringify(updatedCart))
+  }
+
+  return (
+    <div className="cart">
+      <ul>
+        {cart.map((item, k) => (
+          <li className="item" key={k}>
+            {item}
+          </li>
+        ))}
+      </ul>
+      <button onClick={addJuice}>Add juice</button>
+    </div>
+  )
+}

cypress/component/advanced/use-local-storage/App.spec.jsx

@@ -0,0 +1,33 @@
+/// <reference types="cypress" />
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+import App from './App.jsx'
+
+describe('App', () => {
+  beforeEach(() => {
+    // we need to clear the state before each test ourselves
+    localStorage.clear('cart')
+  })
+
+  it('uses cart from localStorage', () => {
+    const items = ['apples 🍎', 'oranges 🍊', 'grapes 🍇']
+    localStorage.setItem('cart', JSON.stringify(items))
+    mount(<App />)
+    cy.get('.item').should('have.length', 3)
+    cy.contains('.item', 'oranges 🍊').should('be.visible')
+  })
+
+  it('sets default cart otherwise', () => {
+    mount(<App />)
+    cy.contains('.item', 'kiwi 🥝').should('be.visible')
+    cy.contains('Add juice').click()
+    cy.contains('.item', 'juice 🧃')
+    // and the new item should be added to localStorage
+    // make an assertion retry so even if the localStorage
+    // is updated after a delay, the assertion waits for it
+    // https://on.cypress.io/retry-ability
+    cy.wrap(localStorage)
+      .invoke('getItem', 'cart')
+      .should('equal', JSON.stringify(['kiwi 🥝', 'juice 🧃']))
+  })
+})

cypress/component/advanced/use-local-storage/README.md

@@ -0,0 +1,9 @@
+# localStorage with useEffect
+
+App idea from https://twitter.com/housecor/status/1268900696604258304
+
+Shows how to set `localStorage` before mounting the component, and how to clear the local storage before each test.
+
+![Test](images/cart.png)
+
+See [App.jsx](App.jsx) and [App.spec.jsx](App.spec.jsx)