리액트 테스팅

npx create-react-app rtl-tutorial

npm install --save react-testing-library jest-dom @types/jest

import 'react-testing-library/cleanup-after-each'
import 'jest-dom/extend-expect'

//src/Profile.js

import React from 'react'

const Profile = ({ username, name }) => {
  return (
    <div>
      <b>{username}</b>&nbsp;
      <span>({name})</span>
    </div>
  )
}

export default Profile

// src/Profile.test.js
import React from 'react'
import { render } from 'react-testing-library'
import Profile from './Profile'

describe('<Profile />', () => {
  it('matches snapshot', () => {
    const utils = render(<Profile username="jy" name="재영이" />)
    expect(utils.container).toMatchSnapshot()
  })
  it('shows the props correctly', () => {
    const utils = render(<Profile username="jy" name="재영이" />)
    utils.getByText('jy') // jy라는 텍스트를 가진 엘리먼트가 있는지 확인
    utils.getByText('(재영이)') // (재영이) 라는 텍스트를 가진 엘리먼트 확인
    utils.getByText(/재/) // 정규식 /재/를 통과하는 엘리먼트가 있는지 확인
  })
})

standard: 29.09.2019

invalid : $ yarn add react-testing-library jest-dom
valid: $ yarn add @testing-library/jest-dom @testing-library/react -D

invalid :

import 'react-testing-library/cleanup-after-each';
import 'jest-dom/extend-expect';
valid: import '@testing-library/jest-dom/extend-expect';

After setting valid, you can see "devDependencies" package.json

"@testing-library/jest-dom": "^4.1.0",
"@testing-library/react": "^9.2.0",

<label for="username-input">아이디</label>
<input id="username-input" />

const inputNode = getByLabelText('아이디')

;<input placeholder="아이디" />

const inputNode = getByPlaceholderText('아이디')

;<div>Hello World</div>

const div = getByText('Hello World')

const div = getByText(/^Hello/)

<img src="/image.png" alt="good image">

const goodImage = getByAltText('good image')

<p>
  <span title="React">리액트</span>는 좋은 라이브러리
</p>

<svg>
  <title>Delete</title>
  <g><path/></g>
</svg>

const spanReact = getByTitle('React')
const svgDelete = getByTitle('Delete')

;<input value="text" />

const input = getBydisplayValue('text')

;<span role="button">삭제 </span>

const spanRemove = getByRole('button')

;<div data-testid="commondiv">흔한 div</div>

const commonDiv = getByTestId('commondiv')

import React, { useState, useCallback } from 'react'

const Counter = () => {
  const [number, setNumber] = useState(0)

  const onIncrease = useCallback(() => {
    setNumber(number + 1)
  }, [number])

  const onDecrease = useCallback(() => {
    setNumber(number - 1)
  }, [number])

  return (
    <div>
      <h2>{number}</h2>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  )
}

export default Counter

import React from 'react'
import { render, fireEvent } from '@testing-library/react'
import Counter from './Counter'

describe('<Counter /', () => {
  it('matches snapshot', () => {
    const utils = render(<Counter />)
    expect(utils.container).toMatchSnapshot()
  })
  it('has a number and two buttons', () => {
    const utils = render(<Counter />)
    //버튼과 숫자가 있는지 확인
    utils.getByText('0')
    utils.getByText('+1')
    utils.getByText('-1')
  })
  it('increases', () => {
    const utils = render(<Counter />)
    const number = utils.getByText('0')
    const plusButton = utils.getByText('+1')
    // 클릭 이벤트 두번 발생시키기
    fireEvent.click(plusButton)
    fireEvent.click(plusButton)
    expect(number).toHaveTextContent('2') // jest-dom의 확장 matcher
    expect(number.textContent).toBe('2') // textContent를 직접 비교
  })
  it('decreases', () => {
    const utils = render(<Counter />)
    const number = utils.getByText('0')
    const minusButton = utils.getByText('-1')
    fireEvent.click(minusButton)
    fireEvent.click(minusButton)
    expect(number).toHaveTextContent('-2') // jest-dom의 확장 matcher
  })
})

fireEvent.이벤트이름(DOM, 이벤트객체)

fireEvent.change(myInput, { target: { value: 'hello world' } })