<aside> ❗ JS 테스팅 프레임워크인 jest 를 통한 JS, 리액트의 컴포넌트 등의 로직을 테스트

</aside>

jest 설치

npm i -D jest

npx jest --watchAll  // 파일의 코드가 변경될 때마다 자동으로 테스트한다.

• jest 는 .test.js 로 끝나는 파일을 자동으로 테스트한다.

test()

describe("테스트 묶음 1", () => {

  **test**("테스트 1", () => {
    expect(1 + 2).toBe(3)
  })
  
  **it**("테스트 2", () => {
    expect(1 * 2).toBe(2)
  })

})

• test 함수의 첫 번째 인수는 테스트의 제목을, 두 번째 인수는 테스트의 내용을 담고 있는 콜백 함수를 삽입한다.
• test 함수는 it 함수로 바꿔서 사용할 수도 있다.
• expect의 인수로는 테스트하고 싶은 로직을, toBe의 인수로는 그 로직의 결과값이라고 기대되는 기댓값을 삽입한다.
• 여러 개의 test(또는 it) 함수를 describe 함수의 두 번째 인수의 내부에 삽입되어 한 묶음으로 만들 수 있다.

expect의 다양한 matcher 함수

expect({ age: 30 }).**toEqual**({ age: 30 })  // 객체 간의 비교

expect('hello').**toHaveLength**(5)  // 문자열의 길이 테스트

expect({ name: 'mark' }).toHaveProperty('name', 'mark')  // 객체의 속성과 속성값 비교

expect({ name: 'mark' }.name).toBeDefined()  // 값의 존재 여부 비교
expect({ name: 'mark' }.age).toBeDefined()  // 에러

expect('').toBeFalsy()  // falsy 여부 비교
expect('있음').**not**.toBeFalsy()
expect(NaN).toBeFalsy()
expect(null).toBeFalsy()

React Testing Library

it('RTL', () => {
	// 쿼리 함수 뽑아 내기
	const { getByText } = render(<MyBotton />)
	// 쿼리 함수로 특정 요소 찾기
	const btn = getByText('버튼')
	// jest-dom matcher(DOM 에 특화된 matcher) 를 통해 요소 테스트하기 
	expect(btn).toBeDisabled()
	// fireEvent 객체로 특정 요소에 이벤트 부여하기
	fireEvent.click(btn)
})

• 코드를 통해 사용자의 경험을 간접 체험함으로써 사용자 경험 기반 테스트(행위 주도 테스트)를 할 수 있다.
• render 함수를 통해서 컴포넌트를 렌더링 하고, render 함수로부터 뽑아낸 쿼리 함수(getByText, getByAltText, getByPlaceholderText 등)를 통해 렌더링 된 컴포넌트의 특정 요소에 접근할 수 있다.