Cypress Component Testing with Angular and NGRX.

[theEloise888]

Hi everyone,

I'm doing component testing and all is smooth with the exception of testing the effects and actions of my component. My question is does Cypress support NGRX component testing? If yes, how is it configured? If someone can provide a working example on how to configure the store in Cypress, or shed light on this problem would be great. Thanks!

[jordanpowell88]

@theEloise888 Yes it works with NgRx. The main difference between unit testing testing components with Karma/Jest and CT is the way you provide the store. With Karma/Jest you typically provide it using provideMockStore. With Component Testing you actually provide the actual store. Not sure if this helps or not, but maybe you can provide a little more context on what you are trying to test specifically

[theEloise888]

"With Component Testing you actually provide the actual store."

I've tried to configure it this way and am still facing trouble accessing the state with the store selector.

"provide a little more context on what you are trying to test specifically"

I'm trying to test the dispatch of an action which will make a change to the state but am not able to see that dispatch action occur in Cypress.

[jordanpowell88]

You would just mount a component and spy on the store.dispatch. Something like this:

cy.mount(ButtonComponent).then(({ component }) => cy.spy(component.store, 'dispath').as('actionDispatch'))

cy.get('@actionDispatch').should('have.been.called')