cypress를 써보자! (3)

< cypress를 써보자! (2)

< cypress를 써보자! (1)

 

 

E2E 테스트를 계속 작성하다보니 사소하지만 고치고 나면 편한 불편한 점들을 개선하였다.

 

1. supports/setup.js

테스트들마다 공통으로 intercept해야 하는 api들은 supports/setup.js 로 이동하였다.

 

	beforeEach(() => {
	cy.bulkIntercept([
	{
	url: '/api/user/info',
	method: 'GET;,
	res: {
	fixture: `${fixturePath}/user`
	}
	}
	])
	})

view raw setup.js hosted with ❤ by GitHub

(출처) docs.cypress.io

2. fixture path 명명

mock 데이터인 fixture 경로에서 데이터를 가져올 때 파일명만으로는 명확하지 않다고 느껴졌다.

동료 개발자분이 api 경로와 똑같이 구조를 설정하는 아이디어를 제안주셨는데 좋은거 같다.

 

예를 들어, api 경로가 /api/login/user 라면

 

처럼 구성한다.

cy.intercept('POST', '/api/login/user', {
	fixture: `fixtures/login/user`
})

 

3. Cypress.on

사내에서 사용하는 전역 인터페이스를 mock하여 사용할 일이 있었다.

이벤트를 바인딩할 수 있는 on 메서드로 해당 인터페이스를 mocking하였다.

 

on 메서드는 Cypress(전역 객체)와 cy(단일 테스트에서만 사용가능한 객체) 모두 사용가능하다.

모든 테스트에 대해 mocking하고 싶을 땐 Cypress.on 을 사용하고, 각 테스트에 바인딩하고 싶을 땐 cy.on 을 사용한다.

Cypress.on으로 바인딩한 이벤트는 수동으로 해제할 때까지 모든 테스트에 유효하다.

 

Cypress 공식 문서에서 바인딩 가능한 이벤트와 사용 예시를 자세히 소개한다.

 

	Cypress.on('window:before:load', (win) => {
	win.customInterface = {
	request(data) {
	JSON.parse(data).data.forEach(({tid}) => {
	setTimeout(() => {
	win.customInterface.onRequest(tid)
	}, 1000 * Math.random())
	})
	},
	redirectUrl(returnUrl) {
	win.location.href = returnUrl
	},
	}
	})

view raw example.spec.js hosted with ❤ by GitHub