리엑트 React 테스트코드 작성방법 간단한 MECE적인 접근 context를 사용한 spec 파일 구조

1. 2022.03.16 Seonggwan
물흐르듯 읽히는 테스트 코드

2. 구조
• 어떤 조건일 때
• 어떤 행동을 하면
• 이렇게 되어야 한다.

3. 구조
• 어떤 조건일 때
• context(“With …”)
context("With a kyc verified user", () => {

4. 구조
• 어떤 조건일 때
• context(“With …”)
• beforeEach를 이용해서 해당 조
건을 만드는 code 추가
context("With a kyc verified user", () => {
beforeEach(() => {
cy.mockKycPassed();
})

5. 구조
• 어떤 행동을 하면
• context(“When ….”)
context("When clicks login button", () => {

6. 구조
• 어떤 행동을 하면
• context(“When ….”)
• beforeEach로 해당 행동을 하는
코드를 추가
context("When clicks login button", () => {
beforeEach(() => {
cy.contains("Sign In").click();
})

7. 구조
• 이렇게 되어야 한다.
• it(“should …”)
it("should redirect to dashboard", () => {});

8. MECE

9. MECE 예
• 빠지지 않고 모든 경우의 수를 생각
개인 기업
Email veri
fi
ccation O, X O, X
KYC O, X O, X
OTP X, sms, otp, both X, sms, otp, both

10. MECE 예
• 빠지지 않고 모든 경우의 수를 생각
개인 기업
Email veri
fi
ccation O, X O, X
KYC O, X O, X
OTP X, sms, otp, both X, sms, otp, both
context("With a personal user", () => {
context("With email verified status", () => {
context("With kyc verified status", () => {
context("With otp authentication", () => {});
});
});
});

11. MECE
• 1) 내가 생각했던 케이스만 테스트 한다
• 2) 내가 개발할 때 고려하지 못한 케이스도 테스트 한다. (MECE)