React Testing Library을 사용하여 테스트3 - Fire Event

fireEvent

어플리케이션 개발시 유저가 발생시키는 액션(이벤트)에 대한 테스트를 해야하는 경우가 존재합니다. 이를 위해서 RTL은 fireEvent API를 제공합니다.

fireEvent는 아래와 같이 사용할 수 있습니다.

fireEvent[eventName](element: Element | Node | Window | Document, option?: {})

제공되는 이벤트 및 option은 아래 URL에서 확인할 수 있습니다.

https://github.com/testing-library/dom-testing-library/blob/main/src/event-map.js

위의 사용방법을 통해서 아래와 같이 코드를 작성할 수 있습니다.

const Button = () => {
  const [disabled, setDisabeld] = useState(false);
  const onClick = () => {
    setDisabeld(true);
  }
  return <button onClick={onClick} disabled={disabled}>버튼</button>
}

test('fire event test', () => {
  render(<Button />);

  const button = screen.getByText('버튼');
  fireEvent.click(button);

  expect(button).toHaveAttribute('disabled');
});

input에 값 할당하기

option으로 target 프로퍼티를 사용하면 해당 값이 element에 할당된다.

const Input = () => {
  const [value, setValue] = useState('');
  
  return (
    <label>
      input
      <input value={value} onChange={e => setValue(e.target.value)} />
    </label>
  )
}

test('input test', () => {
  render(<Input />);
   
  fireEvent.change(screen.getByLabelText('input'), { target: { value: 'a' } });
  const input = screen.getByDisplayValue('a');
  expect(input.value).toEqual('a');
});

Jest의 Mock을 사용한 이벤트

컴포넌트 내부에서 이벤트 핸들러를 구현하지 않고 외부에서 받아오는 경우 Jest의 Mock을 이용해서 핸드럴가 호출되었는지 여부를 확인할 수 있습니다.

const Button = ({ onClick, children }) => (
    <button onClick={onClick}>{children}</button>
);

test('Jest의 Mock을 사용한 이벤트', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>Click Me!</Button>);
  fireEvent.click(screen.getByText(/click me/i));
  expect(handleClick).toBeCalledTimes(1);
});