附录 2：Testing Library 组件测试基础

The more your tests resemble the way your software is used, the more confidence they can give you.

import { render } from '@testing-library/react'

test('should show h1 title', () => {
  // given
  const comp = render(<App />)

  // when
  const result = comp.getByTestId('title').textContent

  // then
  expect(result).toBe('练功房前端脚手架')
})

Query 查找元素

getByLabelText
getByPlaceholderText
getByText
getByDisplayValue

getByAltText
getByTitle
getByRole

getByTestId

Which query should I use?

type	No Match	1 Match	1+ Match	Await?
getBy	throw	return	throw	No
findBy	throw	return	throw	Yes
queryBy	null	return	throw	No
getAllBy	throw	array	array	No
findAllBy	throw	array	array	Yes
queryAllBy	[]	array	array	No

测试组件的交互行为

import { render } from '@testing-library/react'
import userEvent from '@testing-library/user-event'

test('should calculate result by input number', () => {
  const comp = render(<App />)

  userEvent.type(comp.getByTestId('input-number'), '15')

  expect(wrapper.getByTestId('number-result').textContent).toBe('FizzBuzz')
})