react testing 예시

아래의 코드에 대한

function App() {
  return (
    <Container>
      <Header>
        <AppLogo src={logo} alt='logo' />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <AppLink
        href='https://reactjs.org'
        target='_blank'
        rel='noopener noreferrer'
        >
          Learn React
        </AppLink>
      </Header>
    </Container>
  );
}

test code이다.

import React from 'react'
import {render, screen} from '@testing-library/react'
import App from './App'

describe('<App />',()=>{
  it('renders component correctly',()=>{
    const {container} = render(<App />)

    const linkElement = screen.getByText(/learn react/i)
    expect(linkElement).toBeInTheDocument()

    const appLogo = screen.getByAltText('logo')
    expect(appLogo).toBeInTheDocument()
    expect(appLogo).toHaveAttribute('src','logo.svg')

    expect(container.getElementsByTagName('p')).toHaveLength(1)
    expect(container.getElementsByTagName('p')[0]).
    toHaveTextContent(
      'Edit src/App.tsx and save to reload.'
      )
    expect(container).toMatchSnapshot()
  })
})

생소한 것만 짚고 가자

expect(container.getElementsByTagName('p')).toHaveLength(1)

App component를 렌더링 하고 Container에 담아놓은 다음 DOM의 p 태그를 모두 불러와 배열에 담는다

.toHaveLength(n)는 그 배열의 길이를 알아내는 함수이다.

 expect(container.getElementsByTagName('p')[0]).
    toHaveTextContent(
      'Edit src/App.tsx and save to reload.'
      

위와 같이 배열에 담은 p tag의 innerText 값은 아래와 같다고 test 해보는 것이다.