Test 주도 개발 (간단한 Counter App 만들기)

CRA 프로젝트를 진행하던중 TDD 주도 개발에관한 글을 보았다. 간단하게 한번 만들어 보면 좋을것 같아서 CRA를 하나 임시로 만들었다. 

App.js

import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  const [disabled, setDisabled] = useState(false);

  return (
    <div className="App">
      <header className='App-header'>
        <h3 data-testid="counter">{count}</h3>

        {/* minus btn */}
        <button 
          data-testid="minus-button"
          onClick={()=>setCount((prev) => prev - 1)}
          disabled={disabled}
        >-</button>

        {/* plus btn */}
        <button 
          data-testid="plus-button"
          onClick={()=>setCount((prev) => prev + 1)}
          disabled={disabled}
        >+</button>
        
        {/* on/off btn */}
        <div>
          <button
            data-testid="on/off-button"
            style={{backgroundColor:"blue"}}
            onClick={()=> setDisabled((prev)=>!prev)}
          >on/off</button>
        </div>
      </header>
    </div>
  );
}

export default App;

위와 같은 클래스가 존재한다고 할때 해당 요소들이 어떤 값들을 반환하는지 랜더링이 잘 일어나는지 확인하는 방법으로 App.test.js에 백앤드 프로젝트할때 junit test code 작성하던것처럼 expect() 이런식으로 코드를 작성하면 된다고 한다. 

 

Doc을 살펴보면서 테스트 코드를 작성했다.

 

App.test.js

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

test('The Counter starts at 0', () => {
  render(<App />);
  const counterElement = screen.getByTestId("counter");
  expect(counterElement).toHaveTextContent(0);
});


test('minus button has correct text', ()=>{
  render(<App />);
  const buttonElement = screen.getByTestId("minus-button");
  expect(buttonElement).toHaveTextContent("-");
})
test('plus button has correct text', ()=>{
  render(<App />);
  const buttonElement = screen.getByTestId("plus-button");
  expect(buttonElement).toHaveTextContent("+");
})

test('When the + button have clicked, the counter number increase 1', ()=>{
  render(<App />);
  const buttonElement = screen.getByTestId("plus-button");
  fireEvent.click(buttonElement);
  const counterElement = screen.getByTestId("counter");
  expect(counterElement).toHaveTextContent(1);
})

test('When the - button have clicked, the counter number decrease 1', ()=>{
  render(<App />);
  const buttonElement = screen.getByTestId("minus-button");
  fireEvent.click(buttonElement);
  const counterElement = screen.getByTestId("counter");
  expect(counterElement).toHaveTextContent(-1);
})

test('on/off btn has blue color', ()=>{
  render(<App/>);
  const buttonElement = screen.getByTestId("on/off-button");
  expect(buttonElement).toHaveStyle({backgroundColor:"blue"});
})

test('Prevent the plus and minus btn from being pressed when the on/off btn is clicked', ()=>{
  render(<App/>);
  const onOffButtonElement = screen.getByTestId("on/off-button");
  fireEvent.click(onOffButtonElement);
  const plusButtonElement = screen.getByTestId("plus-button");
  expect(plusButtonElement).toBeDisabled();

})