Woongjae Lee
NHN Dooray - Frontend Team
2woongjae@gmail.com
👩🏻💻 Easy Setup
🏃🏽 Instant Feedback
고친 파일만 빠르게 테스트 다시 해주는 기능 등
📸 Snapshot Testing
컴포넌트 테스트에 중요한 역할을 하는 스냅샷
~/Project/workshop-201801
➜ npx create-react-app react-ts-jest --scripts-version=react-scripts-ts
~/Project/workshop-201801
➜ cd react-ts-jest
Project/workshop-201801/react-ts-jest is 📦 v0.1.0 via ⬢ v8.9.4
➜ npm i enzyme enzyme-adapter-react-16 react-test-renderer -D
+ react-test-renderer@16.2.0
+ enzyme-adapter-react-16@1.1.1
+ enzyme@3.3.0
added 30 packages in 11.591s
Project/workshop-201801/react-ts-jest is 📦 v0.1.0 via ⬢ v8.9.4 took 12s
➜ npm i @types/enzyme @types/enzyme-adapter-react-16 @types/react-test-renderer -D
+ @types/enzyme@3.1.8
+ @types/enzyme-adapter-react-16@1.0.1
+ @types/react-test-renderer@16.0.0
added 4 packages in 12.088s
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
});
컴포넌트가 정상적으로 생성된다.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import TSButton from './TsButton';
describe('TsButtonComponent', () => {
it('컴포넌트가 정상적으로 생성된다.', () => {
const div = document.createElement('div');
ReactDOM.render(<TSButton />, div);
});
});
enzyme 설정 : setupTests.ts
import { configure } from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
enzyme 로 테스트 수정
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import TSButton from './TsButton';
describe('TsButtonComponent', () => {
it('컴포넌트가 정상적으로 생성된다.', () => {
shallow(<TSButton />);
});
});
컴포넌트가 생성되면 버튼 엘리먼트가 생성되어 null 이 아니다.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import TSButton from './TsButton';
import { shallow } from 'enzyme';
describe('TsButtonComponent', () => {
it('컴포넌트가 정상적으로 생성된다.', () => {
shallow(<TSButton />);
});
it('컴포넌트가 생성되면 버튼 엘리먼트가 생성되어 null 이 아니다.', () => {
// Given
const wrapper = shallow(<TSButton />);
// When
// Then
expect(wrapper).not.toBeNull();
});
});
버튼 엘리먼트에 써있는 텍스트는 "ts-button" 이다.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import TSButton from './TsButton';
import { shallow } from 'enzyme';
describe('TsButtonComponent', () => {
it('컴포넌트가 정상적으로 생성된다.', () => {
shallow(<TSButton />);
});
it('컴포넌트가 생성되면 버튼 엘리먼트가 생성되어 null 이 아니다.', () => {
// Given
const wrapper = shallow(<TSButton />);
// When
// Then
expect(wrapper).not.toBeNull();
});
it('버튼 엘리먼트에 써있는 텍스트는 "ts-button" 이다.', () => {
// Given
const wrapper = shallow(<TSButton />);
// When
// Then
const button = <button>ts-button</button>;
expect(wrapper.contains(button)).toBeTruthy();
});
});
버튼을 클릭하면, p 태그 안에 "버튼이 방금 눌렸다." 라고 쓰여진다.
버튼을 클릭하기 전에는, p 태그 안에 "버튼이 눌리지 않았다." 라고 쓰여진다.
버튼을 클릭하고 5초 뒤에는, p 태그 안에 "버튼이 눌리지 않았다." 라고 쓰여진다.
버튼을 클릭하면, 5초 동안 버튼이 비활성화 된다.
By Woongjae Lee
코드버스킹 워크샵 - React with TypeScript 세번째 (2018년 1월 버전)