Is there the possibility to keep the component mounted between Component Testing its?

[alessandro308]

Is there a way to avoid to re-mount the same component on every it and instead keep the mounted component from the previous test?

Ideally:

describe('Component Name', () => {

   it('render itself', () => {
    cy.mount(..)
    cy.contains('Something');
  });
  it('Show that value', () => {
   cy.contains('Another Value');
  });
})

[marktnoonan]

There's not currently a way to do this, although I think we should track this request and consider making the behavior configurable so there's an escape hatch.

Our recommendation would be to add more assertions to the same it block if there's nothing about the component state that is changing. Existing Cypress recommendation is here, though it hasn't been updated for component testing I think it still applies just fine: https://docs.cypress.io/guides/references/best-practices#Creating-tiny-tests-with-a-single-assertion

Each it is a clean slate. Having component state potentially leak from a previous it could cause problems where your tests need to run in a certain order to pass, which is not ideal in its own right, but also can hide real bugs.

For me the mental model for each it in a component test is:

• Mount in a certain state
• Make all the assertions I need to validate the component in that state, and the actions that are possible from that state
• New component state to test? Mount again with different props or store values or whatever

That said, I find mounting really cheap/fast compared to say, a cy.visit(), so if the test feels long or disorganized, I'll break it up for convenience and the extra mounts haven't bothered me much. If I wanted an it around every individual assertion, I'm sure they would.