Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!

1. 품질 보장: 테스트 코드는 소프트웨어의 품질을 보장합니다. 기능이 예상대로 작동하는지, 새로운 코드 변경으로 인해 기존의 기능에 문제가 발생하지 않는지 확인할 수 있습니다.

2. 회귀 테스트: 기존 코드의 변경이나 리팩토링을 할 때, 테스트 코드를 통해 이전에 작성된 기능들이 여전히 올바르게 동작하는지 확인할 수 있습니다.

3. 개발 속도 향상: 안정적인 테스트 코드가 있으면, 새로운 기능 개발이나 기존 기능의 변경을 보다 자신감 있게 수행할 수 있습니다.

4. 문서화: 테스트 코드는 종종 실제 코드의 동작 방식에 대한 라이브 문서로 활용됩니다. 즉, 다른 개발자들이 해당 코드의 기능과 사용법을 이해하는 데 도움을 받을 수 있습니다.

5. 디버깅: 문제가 발생했을 때, 테스트 코드를 통해 오류를 더 빠르게 찾아 해결할 수 있습니다.

왜 우리는 View 로직 테스트코드만 작성할까?

예) 하나의 상품이 있고, 그 상품들을 보관하는 카트가 있다고 가정해봅시다.

const Page = () => {
	const [cart, setCart] = useState<Cart[]>([]);

	const addCart = (product: Product) => {
		const findIndex = cart.findIndex((i) => i.productId === product.productId);

		if(findIndex !== -1) {
			setCart((i) => ([...i, {...product, quantity: 1}]));
		} else {
			const findItem = cart[findItem];
			setCart((i) => [...i.slice(0, index),
					{ ...findItem, quantity: findItem.quantity + 1 },
					...i.slice(index + 1)]);
		}
	}

	const removeCart = (product: Product) => {
		setCart((cart) => cart.filter(i => i.productId !== product.productId));
	}

	return (
		<div>
			<span>총 Cart ({cart.length})</span>
			// 상품 추가
			{
				// 카트 리스트 & 카트 제거
			}
		</div>
	)
}

효율적으로 테스트코드를 작성하려면?

1. Business 로직:
• 대부분의 프론트엔드 테스트는 비즈니스 로직 중심으로 작성됩니다. 이렇게 하면 핵심 로직이 올바르게 작동하는지 확인할 수 있습니다.
• 비즈니스 로직에 대한 단위 테스트(unit test)는 모듈, 함수 또는 컴포넌트의 독립적인 기능을 테스트합니다.

2. View 로직:
• View 로직에 대한 테스트는 사용자 인터페이스와 상호 작용을 테스트하는 데 중점을 둡니다.
• 종종 통합 테스트(integration test) 또는 엔드 투 엔드 테스트(end-to-end test)의 일부로 수행됩니다. 이러한 테스트는 여러 컴포넌트나 시스템 전체가 함께 올바르게 작동하는지 확인합니다.