How to Access NgRX state in Cypress Test

Question

In an Angular app, I want to access App State inside the Cypress test.

I have followed the suggestions in: How to use Angular Store in Cypress e2e tests

Nothing worked so far. My current setup:

export interface IWindowCypress {
  store: Store;
  Cypress: unknown;
}

export class AppComponent {
  constructor(protected store: Store) {
    const windowWithStore: IWindowCypress = window as unknown as IWindowCypress;
    console.log('AppComponent');
    if (windowWithStore.Cypress) {
      console.log('save store');
      windowWithStore.store = store;
    }
  }
}

In Cypress Side,

describe('My First Test', () => {
  before(() => {
    cy.window().its('store').should('have.length', 6)
  })

I don't have type errors with this setup. But in Cypress test, cy.window.store doesn't exist. I have tried passing an array instead of a store, and even that doesn't exist on Cypress's side. Any ideas on how to fix this problem?

Answer 1

You missed a step, the reference should be to the component property via this

if (windowWithStore.Cypress) {
  windowWithStore.store = this.store;
}

It looks like the parameter version you are using is destroyed after component initialization.