Testing Library API / convenience APIs

Testing Library API 이해하기 - convenience APIs편

Dec 01, 2023

Contents

Clicks Mouse movement Keyboard

Clicks click()dblClick()tripleClick()Mouse movement hover()unhover()Keyboard tab()

다음 API는 pointer() 및 keyboard() API와 같은 기능을 좀 더 손쉽게 수행하는 단축기능을 제공한다.

Clicks

click()


click(element: Element): Promise<void>


pointer([{target: element}, {keys: '[MouseLeft]', target: element}])


test('click', async () => {
	const onChange = jest.fn()
	const user = userEvent.setup()
	
	render(<input type="checkbox" onChange={onChange} />)

	const checkbox = screen.getByRole('checkbox')
	
	await user.click(checkbox)

	expect(onChange).toHaveBeenCalledTimes(1)
	expect(checkbox).toBeChecked()
})

첫 번째 액션은 skipHover 에 따라 건너뛰어질 수 있다.

dblClick()


dblClick(element: Element): Promise<void>


pointer([{target: element}, {keys: '[MouseLeft][MouseLeft]', target: element}])


test('double click', async () => {
  const onChange = jest.fn()
  const user = userEvent.setup()

  render(<input type="checkbox" onChange={onChange} />)

  const checkbox = screen.getByRole('checkbox')

  await user.dblClick(checkbox)

  expect(onChange).toHaveBeenCalledTimes(2)
  expect(checkbox).not.toBeChecked()
})

tripleClick()


tripleClick(element: Element): Promise<void>


pointer([
  {target: element},
  {keys: '[MouseLeft][MouseLeft][MouseLeft]', target: element},
])


test('triple click', async () => {
  const onChange = jest.fn()
  const user = userEvent.setup()

  render(<input type="checkbox" onChange={onChange} />)

  const checkbox = screen.getByRole('checkbox')

  await user.tripleClick(checkbox)

  expect(onChange).toHaveBeenCalledTimes(3)
  expect(checkbox).toBeChecked()
})

Mouse movement

hover()


hover(element: Element): Promise<void>


pointer({target: element})


test('hover/unhover', async () => {
	const user = userEvent.setup()
	render(<div>Hover</div>)

	const hoverBox = screen.getByText('Hover')
	let isHover = false
	
	hoverBox.addEventListener('mouseover', () => {
		isHover = true
	})
	hoverBox.addEventListener('mouseout', () => {
		isHover = false
	})

	expect(isHover).toBeFalsy()
	
	await user.hover(hoverBox)

	expect(isHover).toBeTruthy()

	await user.unhover(hoverBox)

	expect(isHover).toBeFalsy()
})

unhover()


unhover(element: Element): Promise<void>


pointer({target: element.ownerDocument.body})

Keyboard

tab()


tab(options: {shift?: boolean}): Promise<void>


// without shift
keyboard('{Tab}')
// with shift=true
keyboard('{Shift>}{Tab}{/Shift}')
// with shift=false
keyboard('[/ShiftLeft][/ShiftRight]{Tab}')


test('tab', async () => {
  const user = userEvent.setup()
  render(
    <div>
      <input type="checkbox" />
      <input type="radio" />
      <input type="number" />
    </div>,
  )

  const checkbox = screen.getByRole('checkbox')
  const radio = screen.getByRole('radio')
  const number = screen.getByRole('spinbutton')

  expect(document.body).toHaveFocus()

  await user.tab()

  expect(checkbox).toHaveFocus()

  await user.tab()

  expect(radio).toHaveFocus()

  await user.tab()

  expect(number).toHaveFocus()

  await user.tab()

  // cycle goes back to the body element
  expect(document.body).toHaveFocus()

  await user.tab()

  expect(checkbox).toHaveFocus()
})