Cypress Component Testing with Local Storage

[iepoch]

Current behavior

Problem

In my current cypress component test if I run the component test locally the local storage sets the data and test will pass when you run cypress open command ie: npx cypress open --component In the image below you can see this is the Components Test and that I have Mocked the localStorage to show these items listed

However when running the test through cypress run command the LocalStorage gets set but the component never renders the data ie:

npx cypress run --component

This is a screenshot of the headed cypress run is when the component is loading. I have tried BeforeEach and even using

Cypress.on('test:before:run:async', async () => {
  await window.localStorage.setItem('cartItems', JSON.stringify(items))
});

The data does load before this mounts.

This is a screenshot of the headed run you can see it here it populates the Data in local storage but after the component has rendered.

Yet the CartDrawer is not rendering the items because Local Storage and react does not force a re-render of the component. And yet the test when running through cypress open command the component test render fine with the items and pass all the time. What is causing this difference between cypress open and cypress run?

Desired behavior

Would like to be able to use LocalStorage with cypress components to mock the output of the component. Should work the same as cypress open.

Test code to reproduce

You can fork my repo where I have created this test here My repo

Cypress Version

13.7.0

Node version

18.17.0

Operating System

Windows 11

Debug Logs

Log is too long

Other

None

[iepoch]

I am also Attaching this error when checking local storage after setting it the before test as mentioned above. I grabbed this screenshot in headed mode. As you can see even after setting it in the Before it does not appear to be setting local storage until after the component gets mounted. As far as the debug log I have most of it and even that is to long to post here. All the test is checking for is that the Local storage is set in the before

Cypress.on('test:before:run:async', async () => {
  await window.localStorage.setItem('cartItems', JSON.stringify(items))
});

[iepoch]

Still awaiting an answer

[jennifer-shehane]

This looks like a possible bug we'd have to investigate.

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[iepoch]

@jennifer-shehane This is still an issue in the latter versions. This was marked as needing investigation, but has it yet to be looked into?

[jennifer-shehane]

@iepoch This is not being prioritized at the moment.