[Jest] 파일 구조 & 사용법

"describe" argument( name, fn) : 여러 관련 테스트를 그룹화하는 블록을 만든다.

"it" same as test argument ( name,fn, timeout) : 개별 테스트를 수행하는 곳. 각 테스트를 작은 문장처럼 설명

 

"expect" : expect 함수는 값을 테스트할 때마다 사용, expect 함수 혼자서는 거의 사용하지 않으며 matcher와 함께 사용

"matcher" : 다른 방법으로 값을 테스트 하도록 "matcher"를 사용

test('two plus two is four', ()=>{
	expect(2+2).toBe(4) // 여기서 toBe가 matcher
});

test('two plus two is not five', ()=>{
	expect(2+2).not.toBe(5) // 여기서 toBe가 matcher
});

 

 

"render"

DOM에 컴포넌트를 렌더링하는 함수

인자로 렌더링할 React 컴포넌트가 들어감

Return은 RTL에서 제공하는 쿼리 함수와 기타 유틸리티 함수를 담고 있는 객체를 리턴 (Destructuring  문법으로 원하는 쿼리함수만 얻어올 수 있다) ===> 소스 코드가 복잡해지면 비추천, screen 객체를 사용해야한다. 왜냐하면 사용해야할 쿼리가 많아질 수록 코드가 복잡해질 수 있다.

// v1
test('renders learn react link', ()=>{
	render(<App />);
    const linkElement = screen.getByText(/lean react/i);
    expect(linkElement).toBeInTheDocument();
});

// v2
test('renders learn react link', ()=>{
	const { getByText } = render(<App />);
    const linkElement = screen.getByText(/lean react/i);
    expect(linkElement).toBeInTheDocument();
});