😙 스냅샷 테스트

✋ 스냅샷 테스트

스냅샷은 한순간 캡쳐하는것과 같다. 순간의 모습을 포착하여 그 모습을 예상한것과 비교하여 테스트 하는방법이다.

예를 들어 관리자,멤버,게스트에 따라 나오는 화면들이 다른데, 한번 예시로 적용해보았다.

 

🤟 권한별 화면

간단하게 ADMIN,MEMBER,GUEST 일때 서로의 화면이 다르게 나타난다.

간단예제이지만, 실제서비스에서는 화면이 더욱더 복잡할것이다.

<template>
	<div>
		<div id="admin" v-if="ROLE === 'ADMIN'">
			관리자
		</div>
		<div id="admin" v-else-if="ROLE === 'MEMBER'">
			멤버
		</div>
		<div id="admin" v-else-if="ROLE === 'GUEST'">
			게스트
		</div>
	</div>
</template>
<script setup>
import { ref } from 'vue';


const ROLE = ref('ADMIN')

</script>

 

😾 스냅샷테스트로 테스트코드 작성

ROLE을 바꿔가면서 단위테스트를 하였고, 각각의 단위테스트가 끝나면, ROLE를 GUEST으로 변경하였다.

import { shallowMount } from '@vue/test-utils';

import SnapShotView from '../../SnapShotView.vue';

describe('snapshotview unit testing', () => {
	let wrapper = null;
	beforeEach(() => {
		wrapper = shallowMount(SnapShotView)
	});
	afterEach(() => {
		wrapper.vm.ROLE = 'GUEST'
	});
	test('관리자일때 화면 테스트', async () => {
		//given
		wrapper.vm.ROLE = 'ADMIN'

		//when

		//then
		expect(wrapper.vm.$el).toMatchSnapshot()

	});

	test('멤버일때 화면 테스트', async () => {
		//given
		wrapper.vm.ROLE = 'MEMBER'

		//when
		await wrapper.vm.$nextTick();
		//then
		expect(wrapper.vm.$el).toMatchSnapshot()

	});

	test('게스트일때 화면 테스트', async () => {
		//given
		wrapper.vm.ROLE = 'GUEST'

		//when
		await wrapper.vm.$nextTick();
		//then
		expect(wrapper.vm.$el).toMatchSnapshot()

	});
});

 

테스트후에는 __snapshots__폴더가 생기고,  snapshotview.spec.js.snap파일이 생성이되며 내용은 아래와 같이 저장된다

 

만약 화면 수정을 했을 경우에는 기존 화면과 다르다며, 오류를 뱉는다.

멤버=>멤버1 로 변경하였을때 아래와같은 오류가 발생한다.

그럴때는 "u"를 통해 변경됐을때 내용도 변경해준다.

 

 

🙌 스냅샷 후기

해당 테스트의 장점은 HTML구조를 볼 수 있다는 장점이 있다. 다만 약간의 변경이 생겨도 테스트코드 실패를 내뿜을 가능성이 높다.

그리하여 변경사항이 적은 화면에 대해서 적용하는것이 적당할것 같다