iOS Snapshot Testing 스냅샷 테스팅

안녕하세요 :) 

블로그는 오랜만이네요.
ㅇㅖ... 그동안 회사일에 치여 사느라 이제야 돌아왔습니다.

---

오늘은 스냅샷 테스팅에 대해서 포스팅해보려 합니다.

 

먼저 스냅샷 테스팅이 뭐냐?
스냅샷 테스팅은 UI 컴포넌트를 렌더링하여 스냅샷을 찍어두고
실제 결과와 저장된 스냅샷 파일과 비교하는 테스트 기법입니다.

현재 UI 스냅샷을 이전에 저장된 UI 스냅샷 이미지와 비교해서
두 이미지가 동일하면 테스트가 통과되고
두 이미지가 다르다면 테스트에 실패하게 됩니다.

 

스냅샷 테스팅 왜 하는데? 
스냅샷 테스팅은 UI가 예기치 않게 변경되는 것을 막을 수 있습니다.

 

테스트를 위해 프로젝트를 하나 만들어줍니다.

Podfile을 열어줄게요.

pod 'SnapshotTesting'

Podfile에 스냅샷 테스팅을 추가해 줍니다.
그리고 pod install ㄱㄱ

 

간단하게 뷰 컨트롤러에 label과 button을 추가해 볼게요.

class ViewController: UIViewController {

    let label: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = "label"
        return label
    }()
    
    let button: UIButton = {
        let button = UIButton()
        button.translatesAutoresizingMaskIntoConstraints = false
        button.setTitle("button", for: .normal)
        return button
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupView()
    }

    private func setupView() {
        view.backgroundColor = .lightGray
        
        view.addSubview(label)
        
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            label.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
        
        view.addSubview(button)
        
        NSLayoutConstraint.activate([
            button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            button.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 32)
        ])
    }

}

그리고 setupView함수를 통해
label과 button을 서브 뷰로 넣어주고 제약조건을 걸어줍니다.
label은 정중앙에 위치하게 두고 button은 정중앙에서 32 constant를 줄게요.

 

빌드하면 예상대로 아래와 같은 이미지가 되겠죠.

여기서 스냅샷 테스트를 추가해 볼게요.

 

테스트 파일을 열어서 SnapshotTests를 import해줍니다.

테스트할 뷰컨트롤러를 선언해 주고
객체 할당도 해줍니다.

test함수를 만들어 assertSnapshot를 선언해 줍니다.

 

테스트를 돌려볼게요.

실패?
당연히 실패하겠죠?
왜냐 참고할 이미지가 없으니께ㅎㅎㅎ

어설션이 처음 실행되면 스냅샷이 자동으로 디스크에 저장되고
저장된 이미지의 파일 경로가 출력됩니다.

해당 경로로 찾아가 볼게요.

스냅샷 폴더로 가면 저장된 이미지를 확인할 수 있습니다.

오른쪽이 저장된 이미지고
다시 테스트를 돌려주면 ^^ 위 오른쪽 이미지와 비교하게 되겠네요.

 

다시 한번 돌려볼게요.

한번 더 누르면 테스트 성공
왜냐? 아무것도 바뀐 게 없기 때문입니다.

 

그럼 조금의 변화를 줘볼게요.

버튼의 centerYAnchor constant를 32에서 33으로 변경해 줄게요.

 

사실 이거 사람이 보면 잘 모르잖아요?

왼쪽이 32고 오른쪽이 33인데 차이가 느껴지시나요?
(내는 모린다...)

 

근데???? 스냅샷 테스팅은 이걸 잡아줍니다.
다시 테스트를 돌려볼게요.

에? 실패?
이유는 뭐다? 응 스냅샷이 일치하지 않아.
ㅇㅇ 무언가 UI 변경이 있었을 거야.
(32를 33으로 바꿨잖아)

 

사람의 눈으로는 아무 변경도 없어 보이지만
실제 UI는 변경이 있었기에 스냅샷 테스트는 실패하게 된답니다.
이런 식으로 의도하지 않은 UI 변경을 잡아낼 수 있습니다.

 

어설션에서 record를 매개변수로 설정하면 새로운 기록을 할 수도 있습니다.
스냅샷 테스팅 깃헙에서 더 많은 기능을 확인할 수 있으니
사용하기 전에 읽어보시는 걸 추천드립니다.

 

resource
https://github.com/pointfreeco/swift-snapshot-testing
https://mulder21c.github.io/jest/docs/en/next/snapshot-testing