[Solved] Find the mistake in this test snippet:cy.mount(MyComponent, { props: { visible: true } }) cy.get('.modal').should('be.visible') cy.get('.close-btn').click() cy.get('.modal').should('not.exist') | Cypress

Cypress - Component Testing

Find the mistake in this test snippet:

cy.mount(MyComponent, { props: { visible: true } })
cy.get('.modal').should('be.visible')
cy.get('.close-btn').click()
cy.get('.modal').should('not.exist')

AThe selector '.close-btn' is invalid without an id.

BThe mount command is missing the component import statement.

CThe prop 'visible' should be passed as a string 'true'.

DThe last assertion should use 'not.be.visible' instead of 'not.exist'.

Step-by-Step Solution

Solution:

Step 1: Understand modal visibility vs existence
Clicking the close button likely hides the modal but does not remove it from the DOM, so checking not.exist will fail.
Step 2: Correct assertion usage
The correct assertion is not.be.visible to check the modal is hidden but still present.
Final Answer:
The last assertion should use 'not.be.visible' instead of 'not.exist'. -> Option D
Quick Check:
Hidden elements exist but are not visible [OK]

Quick Trick: Use 'not.be.visible' to check hidden elements, not 'not.exist' [OK]

Common Mistakes:

Confusing visibility with existence
Thinking props must be strings
Assuming selectors need ids

Master "Component Testing" in Cypress

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Trace Try Challenge Automate Recall Frame

More Cypress Quizzes

Find the mistake in this test snippet:

Step 1: Understand modal visibility vs existence

Step 2: Correct assertion usage

Final Answer:

Quick Check:

Want More Practice?