React TDD 개발 시작(확장자 추천)

React TDD 개발 시작 (확장자 추천)

npx create-react-app my-app

dependencies

기본적인 test 라이브러리는 npx create-react-app을 하면서 설치되기 때문에 추가로 설치해줘야 하는 패키지는 없습니다. 

npm test

터미널에 npm test를 입력해서 테스트를 시작할 수 있고, 한 번 시작해 놓으면 파일이 바뀔 때마다 자동으로 테스트가 돌아갑니다. 만약에 테스트를 종료하고 싶으면 Ctrl C를 누르면 됩니다. 

---

처음 npm test를 할 때나, w를 누르면 아래와 같은 옵션을 볼 수 있습니다. 

a는 모든 테스트를 돌리고 싶을 때

f는 실패한 테스트를 돌리고 싶을 때 

p는 정규 표현식으로 특정 테스트 파일을 돌리고 싶을 때 사용합니다. 

(맨 처음에는 a로 테스트해 보는 게 좋고, 테스트 코드를 고치면서 확인해야 하는 경우에는 p로 특정 테스트 파일만 돌리는 게 좋았어요, a 모드에서 계속 돌리다 보면 터미널 창이 쭉쭉 올라가서 오류 찾기가 너무 어려웠습니다 ㅜ.ㅜ)

react test

Test 파일 이름

테스트 파일 이름은 component이름. test.js로 짓는다고 합니다. 저는 test 폴더를 따로 만들고 그 안에 test를 집어넣어 줬어요. 

test name

React 테스트 예제

UserForm에서 name과 email을 입력받고, UserList에 해당 내용을 표에 넣어 출력해 주는 app입니다. 

simple app

//App.js
import { useState } from 'react';
import UserForm from './components/UserForm';
import UserList from './components/UserList';

function App() {
  const [users, setUsers] = useState([]);

  const onUserAdd = (user) => {
    setUsers([...users, user]);
  };
  
  return (
    <div>
      <UserForm onUserAdd={onUserAdd} />
      <hr/>
      <UserList users = {users}/>
    </div>
  );
}

export default App;

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

function UserForm({ onUserAdd }) {
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');

  const submitHandler = (event) => {
    event.preventDefault();
    onUserAdd({ name, email });
  };

  return (
    <form onSubmit={submitHandler}>
      <div>
        <label>Name</label>
        <input value={name} onChange={(e) => setName(e.target.value)}></input>
      </div>
      <div>
        <label>Email</label>
        <input value={email} onChange={(e) => setEmail(e.target.value)}></input>
      </div>
      <button>Submit</button>
    </form>
  );
}

export default UserForm;

import React from 'react';

function UserList({ users }) {
  const renderedUsers = users.map((user) => {
    return (
      <tr key={user.name}>
        <td>{user.name}</td>
        <td>{user.email}</td>
      </tr>
    );
  });
  
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>{renderedUsers}</tbody>
    </table>
  );
}

export default UserList;

아래가 테스트 코드 예제입니다. 

getAllByRole로 input 태그를 얻고, 몇 개가 있는지 시험하는 테스트입니다. Role은 ARIA Role로 h1, h2, h3는 'heading'으로, ul, li태그는 'list'로 Role이 정해진다고 합니다. heading, list, button, link, textbox 등등 다양합니다. 

import { render, screen } from '@testing-library/react';
import user from '@testing-library/user-event';
import UserForm from '../components/UserForm';

test('it shows two inputs and a button', () => {
  //render the component
  render(<UserForm />);
  //manipulate the component or find an element in it
  const inputs = screen.getAllByRole('textbox');
  const button = screen.getByRole('button');
  //Assertion
  //what we expect it to do
  expect(inputs).toHaveLength(2);
  expect(button).toBeInTheDocument();
});

---

React 개발할 때 꼭 필요한 확장자

1) JS, HTML, CSS가 변할 때 자동으로 반영해 주는 확장자

live server

2) 예쁘게 코드 모양을 잡아주는 prettier

prettier

3) ES7+ React snippets

snippets

rfce를 입력하면 자동으로 함수를 만들어줍니다. rfce의 뜻은 Create Reqct Functional Component and Export 라네요. 한번 써보면 편한 걸 알아서 계속 쓰게 되는 스니펫입니다 :)

rfce

rfce

다음에는 조금 더 다양한 예제로 포스팅을 해볼게요 :)