# UI테스트

## 특정 DOM 요소 취득하기

```typescript
import { render, screen } from '@testing-library/react'
import { Form } from './Form'

test('이름을 표시한다.', () => {
  render(<Form name='bom'/>)
  expect(screen.getByText('bom')).toBeInTheDocument()
})
```

`screen.getByText()` : 일치하는 문자열을 가진 한 개의 텍스트 요소를 찾는 쿼리\
`toBeInTheDocument()` : 해당 요소가 DOM에 존재하는지 검증하는 커스텀 매쳐

## 특정 DOM 요소를 역할로 취득하기

```typescript
test('버튼 표시', () => {
  render(<Form name='bom'/>)
  expect(screen.getByRole('button')).toBeInTheDoucment()
})

test('헤딩 찾기', () => {
  render(<Form name='bom'/>)
  expect(scrren.getByRole('heading')).toHaveTextContent('계정 정보')
})
```

`getByRole` : 역할을 찾는 쿼리 `toHaveTextContent` : 원하는 문자의 포함여부를 확인하는 매쳐

## 이벤트 핸들러 호출

```typescript
import { fireEvent, render, scrren } from '@testing-library/react'

test('버튼 클릭 시 이벤트 핸들러 실행', () => {
  const mockFn = jest.fn()
  render(<Form name='bom' onSubmit={mockFn}/>)
  fireEvent.click(screen.getByRole('button'))
  expect(mockFn).toHaveBeenCalled()
})
```

***

## 매처

```typescript
test('목록의 갯수를 표시', () => {
   render(<List items={items}/>)
   expect(screen.getAllByRole('listitem')).toHaveLength(3)
})


test('item 목록 갯수', () => {
  render(<List items={items}/>)
  const list = screen.getByRole('list')
  expect(list).toBeInTheDocument()
  expect(within(list).getAllByRole('listitem')).toHaveLength(3)
})

test('item이 없을 때', () => {
  render(<List items={items}/>)
  const list = screen.getByRole('list')

  expect(list).not.toBeInTheDocument()
  expect(list).toBeNull()
})

test('링크의 주소를 확인', () => {
  render(<LinkItem {...item}/>)
  expect(screen.getByRole('link', {name : '신봄'}).toHaveAttribute(
    'href',
    '/shinbom'
  ))
})
```

> `toHaveLength` : 배열 길이를 검증하는 매처\
> `within` : 특정 요소의 하위 요소를 검색할 때 사용됨.\
> `not` : 반대를 나타냄.\
> `toBeNull` : null을 검증하는 매처\
> `toHaveAttribute` : 속성을 검증하는 매처

이 외에 매처들은 따로 정리하지 않고, 사용할 때마다 찾으면서 테스트 코드를 짜야겠다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shinbom.gitbook.io/bom-study/frontend-test/page-8.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.