[Cypress] Store 연동(pinia)

Cypress Test 코드 작성 시 Store의 데이터를 확인하기 위하여 Pinia - Cypress 연동 테스트를 진행 하였습니다. Vuex 또한 동일한 방법으로 적용 할 수 있습니다. 

 

1. 테스트 방법에 차이점

알아두어야 할 점은 현재까지의 Cypress 테스트 코드는 사용자의 Action을 기준으로 테스트 코드를 작성 하였으며, cy.get(), cy.should() 를 이용하여 element정보와 기대값을 비교하였고, 4sec (Default wating time) 를 대기하여 Action에 대한 결과를 체크하였습니다.

 

현재 구현한 Store연동 테스트 코드는 비동기적인 테스트 환경이 제공되지 않습니다. 즉, 사용자 Action에 따라 Dom의 Element가 기대값을 기다리는 것처럼 테스트 되는 것이 아니라, 테스트 코드 내에서 Store를 참조한 순간의 값을 비교할 뿐 입니다. 

 

2. Store연동

1) cypress 환경에서 store 복사

// src/main.ts
const pinia = createPinia();
pinia.use(createPersistedState());
pinia.use(({ store }) => {
    store.router = markRaw(router);
});

if (window['Cypress']) { //Cypress e2e 테스트 환경 일 때 
    window['store'] = pinia;
}

2) getStore Commend 생성

// cypress/support/command.ts
Cypress.Commands.add('getStore', (store) => {
    cy.window().then((win) => {
        return win['store'].state.value[store];
    });
});

// cypress/support/index.d.ts
declare namespace Cypress {
    import { DTO } from '@/models';
    
    interface Chainable {
    	...
        getStore(store: string): Chainable<DTO.Auth.AuthStore>;
    }
}

3) 테스트 코드 작성

it('Store 에 Login 상태를 확인한다.', () => {
    cy.getStore('auth').then((state) => {
    // state의 변화를 감지할 수 없기에 해당 시점의 state값을 비교하는 의미로 expect를 사용
        expect(state.isLogin).to.be.true; 
    });
});

4) 결과

 

 

참고사이트

https://stackoverflow.com/questions/71752719/cypress-using-actions-from-pinia-vue3