18. Jest (TDD)

Jest란?

1. 제스트를 사용해보겠습니다.

1. npx 명령어를 통해 리엑트 앱을 생성해봅시다.

npx create-react-app color-button

1. react 설치가 완료되고 프로젝트가 생성되었습니다. 터미널을 통해 제안을 해주는군요 🙂

1. 설치가 완료되었으면 npm test를 해봅시다.

💡

만약 제스트 실행 시 노드 버전 이슈로

이런 에러가 발생한다면 제스트와 관련된 패키지를 설치 해주셔야 합니다.

npm i -D --exact jest-watch-typeahead@0.6.5

1. a 를 눌러 테스트를 실행해봅니다.

2. 자 이제 내부적으로 어떻게 테스트가 실행되었는지 살펴보겠습니다.

1. 제스트가 실행 코드는 App.test.js 에 있습니다.

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

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

1. 이번에는 테스트를 실패 해봅시다. App.js 의 텍스트를 ‘Learn View’ 로 변경해보고 npm test를 실행 해봅니다.

1. 수정 했던 코드를 원상 복구해서 와치 모드가 잘 작동하는지도 확인해 봅시다. 🙂

3.간단한 기능테스트를 직접 해봅시다.

1. App.js 안의 return 키워드 안의 내용들과 App.test.js 안의 테스트 함수 안의 내용을 모두 지웁니다.

1. 누르면 색이 바뀌는 버튼을 만들고 테스트 해보겠습니다. App.test.js 파일에 테스트 코드를 추가합니다.

test('버튼이 제대로 잘 작동하고 있습니까?', () => {
  render(<App />);
  
	const button = screen.getByRole('button', { name: 'change to blue!' });
  
	expect(button).toHaveStyle({ backgroundColor: 'red' });
});

• 코드에서 요소를 찾을 때 getByRole 로 찾는 것이 보입니다. role은 aria에서 사용하는 요소의 역할을 의미하는 속성입니다. 특정 요소는 role 을 명시하지 않아도  암묵적으로 가지고 있는 경우도 있습니다.(https://www.w3.org/TR/html-aria/#docconformance)

• role 값이 틀렸을 경우 친절하게 제스트에서 제안을 해주기도 합니다.

• 암묵적인 role이 없는 요소의 경우 role 속성을 직접 명시해줍니다.

• getByRole함수는 두번째 인자로, 찾아야할 요소 안의 텍스트를 지정할 수 있습니다.

• toHaveStyle 함수 : 요소가 특정한 CSS 스타일을 가지고 있는지 체크합니다.

1. 이제 테스트를 진행해 보겠습니다. 어떤 결과가 보이시나요?

1. 이제 App.js를 수정해보겠습니다. 아래 코드를 추가해 봅시다.

<div>
      <button style={{ backgroundColor: 'red' }}>change to blue!</button>
</div>

1. 다시 테스트를 돌려봅시다.

1. 이제 기능을 추가해봅시다. 버튼을 클릭했을 때 색이 변하는지 확인하는 테스트입니다.

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

• import 구문에 fireEvent를 추가했습니다. 가상돔과의 상호작용이 가능하도록 하는 객체입니다. 계속해서 아래 코드를 추가합니다.

fireEvent.click(button);
expect(button).toHaveStyle({ backgroundColor: 'blue' });
expect(button.textContent).toBe('change to red!');

1. 테스트에 실패합니다.

• 아직 버튼을 클릭했을 때의 기능을 추가하지 않았기 때문입니다. useState 함수를 통해 현재의 버튼 색을 저장하도록 하겠습니다. App.js 상단에 import 구문을 추가합니다.

import { useState } from 'react';

• useState 함수는 두 가지 요소를 가지는 배열을 반환합니다. 첫번째 요소는 state의 값, 두번째는 state의 값을 설정하는 함수입니다.

const [buttonColor, setColor] = useState('red');

• ‘red’ 문자열이 buttonColor 상수의 값이 됩니다. setColor 는 buttonColor 상수의 값을 바꿀 수 있는 함수를 참조합니다.

1. 이제 이벤트를 달아보겠습니다.

const [buttonColor, setColor] = useState('red');
const newColor = buttonColor === 'red' ? 'blue' : 'red';

return (
  <div>
    <button style={{ backgroundColor: buttonColor }} 
						onClick={() => setColor(newColor)}>change to {newColor}!</button>
  </div>
);

1. 테스트를 돌려보고 결과를 확인합니다.

1. 이제 npm start로 실제로 잘 동작하는지 확인해볼 단계입니다.