안녕하세요!
만들고 있는 서비스에 cypress를 도입하려다 벽을 만나서 질문 드립니다
비즈니스 로직이 post 가 성공하면 다시 get api를 호출해서 리렌더링 해주고 있습니다.
테스트를 post 완료 후 mock 데이터와 추가된 데이터를 합쳐서 리렌더링 되고 추가된 데이터가 잘 렌더됐는지 확인하고 싶은데
문제는 cypress에서
post api를 route로 mocking 한다음 다시 get api를 호출하니까 fixtures에 있는 mock데이터를 그대로 리렌더링 해주고 있습니다.
코드는 아래와 같습니다.
fixtures 의 mock data
{
"requests": [
{
"approved": 0,
"completed": 0,
"created_at": "2020-10-26T16:56:16",
"deleted": 0,
"id": 80,
"name": "시연",
"publisher_id": 1,
"rejected": 0,
"requested": 1,
"self_approved": 0,
"standby": 0,
"status": "requested"
},
{
"approved": 0,
"completed": 0,
"created_at": "2020-10-26T16:56:16",
"deleted": 0,
"id": 81,
"name": "시연2",
"publisher_id": 1,
"rejected": 0,
"requested": 1,
"self_approved": 0,
"standby": 0,
"status": "requested"
}
]
}
테스트 코드
describe('소재 관리 목록', () => {
let requests: any
beforeEach(() => {
cy.server()
cy.fixture('requests.json').then((data) => {
if (!requests) {
requests = data.requests
}
cy.route('requests', requests).as('getRequests')
cy.route('POST', `requests`, {}).as('createRequest')
})
cy.visit('/assets/management/requests')
})
it('소재 목록이 렌더링 되어야 함', () => {
cy.wait('@getRequests')
cy.get('.ant-table-tbody > tr').within((items) => {
expect(items).toHaveLength(2)
})
})
it('소재 생성', () => {
cy.get('.ant-col-2 > .ant-btn').click()
cy.get('#requestForm_name').type('싸이프레스 등록 테스트1')
cy.get('#requestForm_dropbox_url').type(
'https://www.dropbox.com/sh/romwfd58oegr80p/AABkSp6cQd_cuJKZN0G8UfDTa?dl=0',
)
cy.get('.ant-modal-footer > .ant-btn-primary').click()
cy.wait('@createRequest').then(() => {
requests = [
...requests,
{
approved: 0,
completed: 0,
created_at: '2020-10-26T16:56:16',
deleted: 0,
id: 81,
name: '싸이프레스 등록 테스트',
publisher_id: 1,
rejected: 0,
requested: 1,
self_approved: 0,
standby: 0,
status: 'requested',
},
]
})
})
위와 같이 requests를 외부로 빼놓고 requests가 없을때만 mock데이터를 할당하고
이후엔 request와 추가된 데이터를 합쳐주려고 시도했는데 테스트가 실패하더라구요
혹시 이런 케이스는 어떻게 해결할 수 있을까요ㅜㅜ