2021-08-24 TIL

고병표·2021년 8월 24일

CodeSoom-TIL

목록 보기

8/16

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)).