Angular NgRx testing fails

[directcuteo]

Hi. I have a simple test that should check if I have rows in the table. The rows in the table are rendered from the NgRx state.
With the new cypress version, it seems that the following code is failing.
What is a good way of testing using Angular's NgRx feature? Thank you!

it('displays messages in the table', () => {
    cy.window()
      .its('store')
      .then(store =>
        store.select('network').subscribe((network: NetworkState) => {
          if (network.messages.length > 15) {
            cy.get('table')
              .get('row')
              .should('have.length.above', 15);
          }
        }),
      );
  });

Error I get:

cy.then() failed because you are mixing up async and sync code.

In your callback function you invoked 1 or more cy commands but then returned a synchronous value.

Cypress commands are asynchronous and it doesn't make sense to queue cy commands and yet return a synchronous value.

You likely forgot to properly chain the cy commands using another cy.then().

The value you synchronously returned was: Object{6}

Angular version: 14.2.1
NgRx version: 14.3.1
Cypress version: 10.8.0

[jordanpowell88]

Have you tried using Angular Component Testing? https://docs.cypress.io/guides/component-testing/quickstart-angular

[directcuteo]

I started that too, but can I use a real server while using Angular Component Testing?

[jordanpowell88]

Cypress Component Tests run in the browser and have a built in dev server for doing things exactly like this!