Firing Events[Testing Library]

SnowCat·2023년 3월 7일
0

Testing Library

목록 보기
8/11
post-thumbnail
fireEvent(node: HTMLElement, event: Event)

fireEvent(
  getByText(container, 'Submit'),
  new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
  }),
)
  • DOM에 직접적으로 이벤트를 전달하는 방식
    가능하다면 user-event 메서드 사용 권장
  • 이벤트를 앞에 key값으로 작성해도 됨
fireEvent[eventName](node: HTMLElement, eventProperties: Object)
  • 전달한 이벤트에 속성이 포함되어있는 경우 테스트 중 해당 노드에 속성을 포함시킴
// 응용: 테스트 중 실시간으로 값 변환
fireEvent.change(getByLabelText(/username/i), {target: {value: 'a'}})

fireEvent.change(getByLabelText(/picture/i), {
  target: {
    files: [new File(['(⌐□_□)'], 'chucknorris.png', {type: 'image/png'})],
  },
})

fireEvent.change(input, {target: {value: '2020-05-24'}})

// 파일 드랍
fireEvent.drop(getByLabelText(/drop files here/i), {
  dataTransfer: {
    files: [new File(['(⌐□_□)'], 'chucknorris.png', {type: 'image/png'})],
  },
})

// 키보드 입력
fireEvent.keyDown(domNode, {key: 'Enter', code: 'Enter', charCode: 13})

fireEvent.keyDown(domNode, {key: 'A', code: 'KeyA'})

createEvent[eventName]

  • 초기화되지 못하는 이벤트 속성과 함께 사용할때 레퍼런스 객채만을 우선 생성해줄 수 있음
// 정의
createEvent[eventName](node: HTMLElement, eventProperties: Object)

// 응용
const myEvent = createEvent('input', input, {
    target: {files: inputFiles},
    ...init,
  })
fireEvent(input, myEvent)
profile
냐아아아아아아아아앙

0개의 댓글