Mock out localStorage for component tests

[Norfeldt]

So far I'm having a blast using the cypress component tests. Made a little helper that allows me to test react context state.

I have now made the state more persistent by saving it to local storage.. However that means I have to mock out localStorage and listen to if it has been call - or some other ways to know it it is doing what I expect it to (would like to avoid implementation testing).

Anybody got a good suggestion on how to go about this?

[lmiller1990]

I'm a bit onfused - what are you asking for? Since everything runs in a real browser, localStorage should work as you'd expect.

We do clear local storage before each test. I also found this community plugin which allows you to persist localStorage, but I am not sure what the main use cases are for this.

[Norfeldt]

I got it working now. First I was following this guide https://example.cypress.io/commands/local-storage and just doing localStorage.getItem('SOME_KEY'), but then I changed to use

import 'cypress-localstorage-commands'
...
cy.getLocalStorage(localStorageCartKey).then((item) => console.log(item))
...

[Norfeldt]

Sorry @lmiller1990 for keeping discussion alive when there is already an answer. Getting further with my tests I'm getting a crossorigin???

It works fine in-real-life but the test fails..

    it('moves previous purchase into cart', () => {
      cy.setLocalStorage(localStoragePurchaseHistoryKey, previousPurchaseObjStr)
      mount(
        <>
          <GlobalStyle />

          <CartProvider>
            <TheUsual />
          </CartProvider>
        </>
      )

      cy.getLocalStorage(localStorageCartKey).then((localStorageCart) => {
        expect(localStorageCart).to.eq(null)
      })

      // cy.findByText("Ja tack").click()

      // cy.getLocalStorage(localStorageCartKey).then((localStorageCart) => {
      //   expect(localStorageCart).to.eq(previousPurchaseObjStr)
      // })

      cy.wait(20000)
    })

If manually click on "Ja tack" ("Yes please") it throws

The following error originated from your test code, not from Cypress.

  > Script error.

Cypress detected that an uncaught error was thrown from a cross origin script.

We cannot provide you the stack trace, line number, or file where this error occurred.

Check your Developer Tools Console for the actual error - it should be printed there.

It's possible to enable debugging these scripts by adding the crossorigin attribute and setting a CORS header.

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

When the onClick only reads from local storage, puts it into react state, which then by useEffect stores it to local storage

  const resetWithPreviousPurchase: TCartResetWithPreviousPurchase = () => {
    const purchases: TCartItem[] = JSON.parse(localStorage.getItem(localStoragePurchaseHistoryKey))
    cartItemsSet(purchases)
  }

  React.useEffect(() => {
    if (isInitialRender) {
      isInitialRenderSet(false)
      const cartItemsPersistent = JSON.parse(localStorage.getItem(localStorageCartKey))
      if (cartItemsPersistent) {
        cartItemsSet(cartItemsPersistent)
      }
    } else {
      localStorage.setItem(localStorageCartKey, JSON.stringify(cartItems)) // 👈
    }
  }, [cartItems])

[Norfeldt]

I also tried

cy.getLocalStorage(localStorageCartKey).then((localStorageCart) => {
        expect(localStorageCart).to.eq(null)

        cy.findByText('Ja tack').click()

        cy.getLocalStorage(localStorageCartKey).then((localStorageCart) => {
          expect(localStorageCart).to.eq(previousPurchaseObjStr)
        })
      })