Cypress not picking up html elements

I'm trying to get a handle on a simple html <p> tag using the data-cy attribute:

<p data-cy="register">Register</p>


First I mount the component:

it('mounts', () => {
cy.mount(AccountDialogComponent, {
imports: [
HttpClientTestingModule,
ReactiveFormsModule,
AngularMaterialModule,
BrowserAnimationsModule
],
declarations: [ AccountDialogComponent ],
providers: [{provide: AccountService, useValue: accountService}]
})
});


The test I am running for this as follows:

it("text should be 'Register' when user is registering", () => {
cy.get('[data-cy="register"]').should('have.text', 'Register');
});


The test keeps returning a failure:

assertexpected [data-cy="register"] to have text Register, but the text was ''
​

After another few seconds, it then returns an Assertion Error:

Timed out retrying after 4000ms: Expected to find element: [data-cy="register"], but never found it.
​

I can't understand why this isn't working?

I am new to Cypress and this is the first test I am dong since installing Cypress in my Angular app.

Continue reading...