Jest는 테스트 Framework이며, Enzyme은 라이브러리로 Jest가 좀 더 큰 개념이다. Enzyme은 Implementation Driven Test(구현 주도 테스트) 방법론을 따르는 테스트를 작성하기에 용이한 테스트 라이브러리로써, 가상 DOM 기준으로 테스트를 작성해야하며 props나 state 검증하기에 용이합니다. React Testing Library는 Behavior Driven Test 방밥론을 따르는 테스트를 작성하는데 적합하며 사용자 브라우저에서 랜더링하는 실제 HTML 마크업의 모습이 어떤지에 대해서 테스트하기 용이합니다. 만약 React 를 함수형 컴포넌트로 작성한다며, Enzyme 함수형 컴포넌트를 제한적으로 지원하기 때문에 React Testing Library 추천한다.$ yarn add enzyme enzyme-adapter-react-16
# 또는 npm install --save enzyme enzyme-adapter-react-16
** 라이프사이클 훅 호출 여부는 mount API와 shallow API가 상이하므로 유의가 필요하다. 간단하게 정리하면 mount API는 모든 라이프사이클 훅이 호출되고 shallow API는 componentDidMount와 componentDidUpdate를 제외하고 라이프사이클 훅이 호출된다. 이러한 차이점에 유의하여 선별적으로 API를 사용하도록 하자.
export default class Counter extends Component { state = { value: 0, title: ‘’, }
changeTitle = (e) => { this.setState(() => ({ title: e.target.value })); }
increment = () => { this.setState(prevState => ({ value: prevState.value + 1 })); };
render() { return ( <div> <input value={this.state.title} id=”title” onChange={this.changeTitle} /> {this.state.value} <button id=”up” onClick={this.increment}>증가</button> </div> ); } }
* counter-test.jsx
```javascript
import React from 'react';
import Counter from './counter.jsx';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
describe('<Counter />', () => {
it('성공적으로 렌더링되어야 합니다.', () => {
const wrapper = shallow(<Counter />);
expect(wrapper.length).toBe(1);
});
it('타이틀 인풋이 렌더링되어야 합니다.', () => {
const wrapper = shallow(<Counter />);
expect(wrapper.find('#title').length).toEqual(1);
});
it('타이틀이 변경되어야 합니다.', () => {
const wrapper = shallow(<Counter />);
wrapper.find('#title').simulate('change', { target: { value: '값' } });
expect(wrapper.state().title).toBe('값');
});
it('숫자가 올라가야 합니다.', () => {
const wrapper = shallow(<Counter />);
wrapper.find('#up').simulate('click');
wrapper.find('#up').simulate('click');
expect(wrapper.state().value).toBeLessThan(1);
});
});