> For the complete documentation index, see [llms.txt](https://jimmylv.gitbook.io/tdd-frontend/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jimmylv.gitbook.io/tdd-frontend/coding/00-project-fizzbuzz/09-appendix-testing-library-basic.md).

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

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

![](/files/-M1ictY6GSmb3pLO5XTO)

```javascript
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 查找元素

```javascript
getByLabelText
getByPlaceholderText
getByText
getByDisplayValue

getByAltText
getByTitle
getByRole

getByTestId
```

## [Which query should I use?](https://testing-library.com/docs/guide-which-query)

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

## 测试组件的交互行为

```javascript
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')
})
```