Cypress can't find data-testid

Question

I am new to end to end testing and using Cypress for the first time . I have an application, made with Nextjs & Material UI in which I want to write a test for a profile page. I have the following test to check whether username is shown or not:

it("Username",()=>{
        cy.wait(10000)
        cy.get('[data-testid="username"]',{withinSubject:null}).should('exit'); // getting error on this command.
        cy.contains('@').should('exit')
      })

But Cypress is not able to find the data-testid="username" even I have set the data-testid="username" to the component which will show the username:

{loading ? (
                <Skeleton variant="text" width={100} animation="wave" />
              ) : (
                <span className="text-sm text-grey-normal" data-testid="username">
                  @{userInfo?.get("spectUsername")}
                </span>
              )}

I have also tried the method included in this issue to solve the problem but this also don't work for me. I have searched a lot about this issue but can't find a working solution . What I am doing wrong ? How to make it work ? Is there any module I am forgetting to import to make this working ?

Answer 1

You have to use exist in should method as below

cy.get('[data-testid="username"]',{withinSubject:null}).should('exist');

Else you can use length greater than function to know if username entered or not.

cy.get('[data-testid="username"]').should(($lis) => {              
 expect($lis).to.have.length.greaterThan(0);
});