Testing Tool Jest

Jest로 리액트(React.js) 단위 테스트

설치 및 옵션

설치
yarn add jest
옵션
--verbose : 테스트 항목별 결과 목록
--coverage : 전체 테스트 충분 지표

Sum

const sum = (num1, num2) => {
  return num1 + num2
}
export default sum

Sum 테스트

import sum from './Sum'
it('sum', () => {
  expect(sum(1, 2)).toBe(3)
  // sum 값이 맞게 나오는지 확인
})

테스트 결과

PASS  src/Sum.test.js
  ✓ sum (4ms)
// Counter.js

Counter 컴포넌트

import React, { Component } from 'react'
class Counter extends Component {
  state = {
    value: 1
  }
  onIncrease = () => {
    this.setState(({value}) => ({ value: value + 1 }))
  }
  onDecrease = () => {
    this.setState(({value}) => ({ value: value - 1 }))
  }
  render() {
    return (
      <div>
        <h1>Counter</h1>
        <h2>{this.state.value}</h2>
        <button onClick={this.onIncrease}>+</button>
        <button onClick={this.onDecrease}>-</button>
      </div>
    )
  }
}
export default Counter

Counter 컴포넌트 테스트

import React from 'react'
import Renderer from 'react-test-renderer'
import Counter from './Counter'
describe('Counter', () => {
  let component = null
it('renders', () => {
    component = Renderer.create(<Counter />)
  })
// increase 테스트
  it('increases', () => {
    component.getInstance().onIncrease()
    expect(component.getInstance().state.value).toBe(2)
    // increase 실행한 후 value 값이 2인지 확인
  })
// decrease 테스트
  it('decreases', () => {
    component.getInstance().onDecrease()
    expect(component.getInstance().state.value).toBe(1)
    // decrease 실행한 후 value 값이 1인지 확인
  })
})

Counter 컴포넌트 테스트 결과

PASS  src/Couter.test.js
  Counter
    ✓ renders (10ms)
    ✓ increases (3ms)
    ✓ decreases (1ms)
Test Suites: 1passed, 1total
Tests:       3passed, 3total
...

TodoList 컴포넌트

// TodoList.js
import React, { Component } from 'react'
class AddList extends Component {
  state = {
    title: '',
    list: []
  }
  onChange = (e) => {
      this.setState({
          title: e.target.value
      })
  }
  addList = () => {
      this.setState({
          title: '',
          list: [...this.state.list, this.state.title]
      })
  }
  render() {
    return (
      <div>
          <label>Todo List : </label>
          <input type="text" value={this.state.title} onChange={this.onChange} />
          <button type="add" onClick={this.addList}>+</button>
          {this.state.list.map((item) => (<p>{item}</p>))}
      </div>
    )
  }
}
export default AddList

TodoList 컴포넌트 테스트

import React from 'react'
import Renderer from 'react-test-renderer'
import TodoList from './TodoList'
describe('TodoList', () => {
  let component = null;
it('renders', () => {
    component = Renderer.create(<TodoList />)
  })
// addList 가 잘 되는지 확인
  it('addList correctly', () => {
    component.getInstance().state.title = 'travel'
    component.getInstance().addList()
    expect(component.getInstance().state.list).toEqual(['travel'])
    // title 값 addList 값이 travel 인지 확인
  })
})

TodoList 컴포넌트 테스트 결과

PASS  src/TodoList.test.js
  TodoList
    ✓ renders (12ms)
    ✓ addList correctly (8ms)
Test Suites: 1passed, 1total
Tests:       2passed, 2total
...

Jest : https://jestjs.io