2021-08-24 TIL
Facts (사실, 객관)
- 테스팅 라이브러리 Jest에 대해 배웠다.
- 프로그래머스 코딩 테스트 공부를 시작했다
- 잔여백신 예약에 성공해 접종했다.
Feelings (느낌, 주관)
- React랑 친해진 줄 알았는데 내 착각이였다... 테스팅 라이브러리를 처음 본 순간 착잡했지만 공부하니깐 할만하다는 생각이 들었다.. 맞지?
Findings (배운 점)
mocking 이란?
- mocking은 단위 테스트를 작성할 때, 해당 코드가 의존하는 부분을 가짜(mock)로 대체하는 기법을 말합니다.
mockFn.mockReturnValue("I am a mock!");
console.log(mockFn()); // I am a mock!
- mockReturnValue(리턴 값) 함수를 이용해서 가짜 함수가 어떤 값을 리턴해야할지 설정해줄 수 있습니다.
javascript에서 코드(수동)로 이벤트 발생시키는 법.
- Element.fireEvent('이벤트이름') // IE 8 버전
- Elemenet.dispatchEvent('이벤트이름') // IE 9버전,크롬,파폭 등
- fireEvent(node: HTMLElement, event: Event)
// <button>Submit</button>
fireEvent(
getByText(container, 'Submit'),
new MouseEvent('click', {
bubbles: true,
cancelable: true,
}),
)
-Jest의 Mock 함수는 함수에 전달된 콜백이 호출되었는지 또는 콜백 함수를 트리거 해야 하는 이벤트가 바인딩된 콜백을 트리거 할 때 호출된 콜백을 테스트하는 데 사용할 수 있습니다 .
import {render, screen, fireEvent} from '@testing-library/react'
const Button = ({onClick, children}) => (
<button onClick={onClick}>{children}</button>
)
test('calls onClick prop when clicked', () => {
const handleClick = jest.fn()
render(<Button onClick={handleClick}>Click Me</Button>)
fireEvent.click(screen.getByText(/click me/i))
expect(handleClick).toHaveBeenCalledTimes(1)
})
https://testing-library.com/docs/dom-testing-library/api-events/
Testing Library About Queries
-
쿼리는 페이지에서 요소를 찾기 위해 테스트 라이브러리가 제공하는 방법입니다. 여러 유형의 쿼리 ("get", "find", "query")가 있습니다.이들 간의 차이점은 요소가 발견되지 않으면 쿼리에서 오류가 발생하는지 또는 Promise를 반환하고 다시 시도하는지 여부입니다.
-
단일 요소
getBy...: 쿼리에 대해 일치하는 노드를 반환하고 일치하는 요소가 없거나 둘 이상의 일치가 발견 되면 설명 오류를 발생시킵니다 ( getAllBy둘 이상의 요소가 예상되는 경우 대신 사용 ).
queryBy...: 쿼리에 대해 일치하는 노드를 반환하고 일치하는 null요소가 없으면 반환 합니다. 이것은 존재하지 않는 요소를 어설션하는 데 유용합니다. 둘 이상의 일치 항목이 발견되면 오류가 발생합니다( queryAllBy확인된 경우 대신 사용 ).
findBy...: 주어진 쿼리와 일치하는 요소가 발견되면 해결되는 Promise를 반환합니다. 요소가 발견되지 않거나 기본 제한 시간인 1000ms 후에 둘 이상의 요소가 발견되면 약속이 거부됩니다. 둘 이상의 요소를 찾아야 하는 경우 를 사용하십시오 findAllBy. -
다중 요소
getAllBy...: 쿼리에 대해 일치하는 모든 노드의 배열을 반환하고 일치하는 요소가 없으면 오류가 발생합니다.
queryAllBy...: 쿼리에 대해 일치하는 모든 노드의 배열을 반환하고 일치하는 []요소가 없으면 빈 배열( )을 반환합니다 .
findAllBy...: 주어진 쿼리와 일치하는 요소가 발견되면 요소 배열로 해결되는 약속을 반환합니다. 1000ms 의 기본 시간 초과 후에 요소가 발견되지 않으면 약속이 거부됩니다 .
findBy메소드는 getBy*쿼리와 의 조합입니다 waitFor. 그들은 waitFor옵션을 마지막 인수로 받아들입니다 (ie await screen.findByText('text', queryOptions, waitForOptions)).
2가지 간단한 룰
- 먼저 자동화된 테스트에서 실패하지 않는 한 새로운 코드를 작성하지 않는다.
- 중복을 제거한다.
Affirmation(자기 선언)
- 어렵다고 포기하지 말고 계속 노력하자!!
Author And Source
이 문제에 관하여(2021-08-24 TIL), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kokoball0/2021-08-24-TIL저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)