주관적인 프론트엔드 테스트 기준 위키

기능의 테스트는 실제 해당 기능을 구현한 곳에서 한다.

컴포넌트를 테스트할 때 실제 해당 기능을 구현한 곳에서 기능에 대한 테스트를 진행하고, 나머지 영역에서는 호출만 테스트한다.

# App.js
const App = () => {
    const [title, setTitle] = useState('');

    const handleChange = (event) => {
        setTitle(event.target.value);
    };
    return <Input value={title} onChange={handleChange} />
}

# App.test.js

test('input 에 입력 시, 입력값이 input 에 노출된다.', () => {
  const { container, getByRole } = render(<App />);
  const input = getByRole('textbox', { name: /할 일/i });

  fireEvent.change(input, { target: { value: 'Study' } });
  expect(input).toHaveValue('Study');
});

# Input.js
const Input = ({ value, onChange }) => {
    return (<>
        <label htmlFor="input-task-title">
      할 일
    </label>
        <input 
            id="input-task-title"
            type="text"
            value={value}
      onChange={onChange}
        />
    </>)
}

# Input.test.js

test('입력 시, onChange 함수가 호출된다.', () => {
    const handleChange = jest.fn();
    const { container, getByRole } = render((
    <Input
      value={value}
      onChange={handleChange}
    />
  ));
  const input = getByRole('textbox', { name: /할 일/i });

  fireEvent.change(input, { target: { value: 'hello' } });
  expect(handleChange).toBeCalled();
});

renderComponent 함수 등을 사용해서 반복을 줄인다.

테스트 코드는 말 그대로 어떤 함수의 설명서같은 역할을 한다. 따라서 과도한 고도화는 지양한다.

하지만 테스트 코드를 작성하다보면 컴포넌트 렌더링과, 해당 테스트에서 자주 사용하는 요소를 따로 빼는 것이 이해하는데 도움이 된다고 판단했다.

1. 렌더링 대상
2. 자주 사용하는 돔 요소
3. 자주 사용하는 selector 함수

const renderApp = () => {
  const { container, getByRole } = render(<App />);
  const input = getByRole('textbox', { name: /할 일/i });

  return { container, input, getByRole };
};

describe ~ context ~ it 을 통해 테스트 시나리오를 작성한다.

describe 는 테스트의 주체

context 는 따로 비교를 해줘야할 맥락(상황)이 있을 때 선택적으로 사용

it 은 실제 테스트하는 내용을 서술한다.

테스트 하나하나는 독립적으로 실행된다.

컴포넌트를 테스트하다보면, 앞서 테스트한 선행동작을 사용해야하는 경우가 있는 데, 이때 동기적으로 테스트를 작성하면 안되고, 각각의 테스트는 독립적으로 실행된다고 생각하여 작성해야한다.

그리고 그런 상황에서 해당 테스트 2개가 묶일 수 있는지도 고려해본다.

각각의 테스트를 독립적으로 사용하기 위해 테스트의 시작, 끝 지점에 실행시켜주는 hook을 설정할 수 있다.

beforeEach(() => {
  jest.clearAllMocks();
});