[TIL] React-testing-library를 사용해보자 -1(준비와 간단한 코드)

gun·2021년 1월 4일
0

항상 필요하다고 생각하고 해야한다고 생각해왔지만 귀찮다고 미루던 TDD를 시작해 보려고 합니다..

TDD란?

TTD란 Test Driven Development의 약자로 테스트 주도 개발이라고 합니다. TDD를 함으로서 이점은 테스트 코드를 작성하며 결과를 예측할수 있기 때문에 설계의 대한 오류를 좀더 빨리 발견할수 있다는 것입니다.
(기존 개발 프로세스)

(TDD)


React-testing-livrary 사용하기

React-testing-livrary란 React에서 제공하는 Testing 라이브러리입니다.


설치

npx create-react-app 을 하시면 자동으로 Jest와 React-testing-livrary를 즉시 제공합니다.

npx create-react-app my-app
or
npm install --save-dev @ testing-library / react

Counter

+버튼을 누르면 1씩 증가하고, -버튼을 누르면 1씩 감소하는 app을 만들어 보겠습니다.

//Counter.test.js
export default Counter
import React from 'react'
import Counter from './Counter'
import { render } from '@testing-library/react';

describe('<Counter/>' , () => {
    it('have a button', () => {
        const utils = render(<Counter/>)
        utils.getByText('+')
        utils.getByText('-')
        utils.getByText('0')
    })
})

컴포넌트 작성 전 테스트 부터 짜주겠습니다.
render을 이용해 해당 컴포넌트를 불러오고 getByText를 통해 해당 엘리먼트가 갖고 있는 텍스트 값으로 DOM을 선택합니다.

//Counter.js
import React from 'react';

const Counter = () => {

    return (
    <div>
        <div>{number}</div>
        <button>+</button>
        <button>-</button>
    </div>
    )
}

npm test를 통해 test가 잘 통과 되는지 보겠습니다. 테스트가 잘 통과가 되었나요? 그럼 TDD를 성공적으로 하신겁니다!

계속해서 더하기 빼기도 구현해 보겠습니다.

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

describe('<Counter/>' , () => {
    it('have a button', () => {
        const utils = render(<Counter/>)
        utils.getByText('+')
        utils.getByText('-')
        utils.getByText('0')
    })
    it('increases',() => {
        const utils = render(<Counter/>)
        const number = utils.getByText('0');
        const plus = utils.getByText('+');
        fireEvent.click(plus)
        fireEvent.click(plus)
        expect(number).toHaveTextContent('2')
    })
    it('decrease', () => {
        const utils = render(<Counter/>)
        const number = utils.getByText('0');
        const decrease = utils.getByText('-');
        fireEvent.click(decrease)
        fireEvent.click(decrease)
        expect(number).toHaveTextContent('-2')
    })
})

fireEvent는 이벤트 효과를 불러옴니다.
아직 테스트가 통과가 안되죠? 마저 통과되도록 해보겠습니다.

//Counter.js
import React, { useState, useCallback } from 'react';

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

    const clickIncrease =useCallback(() => {
        setNumber(number + 1);
      }, [number]);
      const clickDecrease = useCallback(() => {
        setNumber(number - 1);
      }, [number]);
    
    return (
    <div>
        <div>{number}</div>
        <button onClick={clickIncrease}>+</button>
        <button onClick={clickDecrease}>-</button>
    </div>
    )
}

export default Counter

이제 테스트가 잘 통과되는것을 확인할수 있습니다!

마무리

어렵고 많은 시간이 들줄 알았는데 생각보다 혼자 못할정도는 아니네요. 하지만 실전에서 사용하기 위해서는 좀더 깊숙히 파봐야겠죠... 열심히 해봐야겠습니다.

0개의 댓글