Jest and React Testing

(작성한 코드가 의도대로 작동하는지 확인하는 것!)

왜 test가 필요할까?

Documentation

• 코드 자체가 기록이 된다.

Consistency

• 파일 구조나 사용 convention을 맞추어 지키고 있는지를 확인 할 수 있다.

Comfort & Confidence

• strong test를 함으로서 코드에 대한 확신을 할 수 있다.

Productivity

• 팀 전체의 생산성을 장기적으로 봤을 때 높이고, 코드의 퀄리티도 높일 수 있다.

테스트 종류

Unit tests

• 코드 자체가 기록이 된다.

Integration tests

• 파일 구조나 사용 convention을 맞추어 지키고 있는지를 확인 할 수 있다.

End-to-end tests (E2E)

• Cypress나 Selenium같은 자동화 된 framework 이다.

도움 받은 블로그

Jest Test

• Facebook에서 개발한 JavaScript 코드를 테스트하는 JavaScript 코드 테스트 라이브러리 로서 React와 호환성이 좋다.
• 다양한 Matchers를 사용하여 코드를 테스트 한다.
• Matchers 앞에 not. 을 붙이면 아닌 경우로 테스트 한다.
• expect(a).toBe(b) : a가 b 이다 즉, 뒤에 각 각 다른 matcher를 입력하여 확인하는 형태이다.

1. toEqual()
   • ToBe()와 유사한데 더 큰 개념으로 객체의 내용까지 같은지 검증할때 사용된다.
2. toBeTruthy(), toBeFalsy()
   • 값이 boolean형식일 때, true 인지 false인지를 검증하기 위해 사용된다.
3. toHaveLength(), toContain()
   • 배열의 길이 체크하거나 배열에 포함되있는지 검증하기 위해 사용된다.
4. toMatch(/string내용/)
   - string에 내용이 포함되는지 확인하기 위해 사용된다.
   5.**toThrow()

• 해당 function이 error를 return 하는지 확인하고 싶을 때 사용된다.

test('Fake Test',()=> {
expect(true).toBeTruthy();
});

Unit test

• test( “” , () => {} )
• test 명을 string으로 하고, 콜백 함수 형태를 두번째 인자로 받는 함수 형식이다.
• test 혹은 it 으로 표현할 수 있다.

app.js

export const add = (x, y) => x + y;

//unit test
//It only tests one thing
test('<add>', () => {
  expect(add(1, 2)).toBe(3);
  expect(add(3, 2)).toBe(5);
});

test('Fake two', () => {
  expect(false).toBeFalsy();
});

Integration test

export const totalPrice = (subTotal, total) => {
  return '$' + add(subTotal, total);
};

import { add , total} from './App';

test('total', () => {
    expect(total(10,3)).toBe('$13');
  });

Grouping

• describe로 아래와 같이 여러 test를 묶어 줄 수 있다. (scoping)
• before나 after block을 describe 안에서만 grouping 하여 테스트 할 때에 보통 사용된다.

describe ('total', () => {
	it('add', () =>{
    	expect((add(1,2)).toBe(3);
      });
	it('addPrice', () =>{
    	expect((addPrice(1,2)).toBe('$3')
      });
})

Jest Mock function

const add = jest.fn(() => 3);
//fuction을 시험 해본다는 의미로 예상되는 값을 대입해 테스트 한다. 

test('add', () => {
  expect(add(0, 3)).toBe(3);
  expect(add).toHaveBeenCalledTimes(1);
  //add function을 한번 불렀다는 것 확인하는 테스트
  expect(add).toHaveBeenCalledWith(0,3);
  //넘겨주었던 숫자를 확인하는 요소 
});

snapshot test

• render될 화면과 실제 코드를 직관적으로 비교해주고 디버깅 할 부분을 아래와 같이 설명해준다. 아래 내용을 수정하고 test 실행하면 전체 test가 pass 한다.

Test 전/후 처리하기

• 테스트 실행 전 이나 후에 적용 해 주어야 하는 부분은 아래 method로 실행한다.
  보통 fetch할 때, data가 불러온 상황에서 test를 처리해야 하는 경우가 있으므로, 그런 특수한(비동기처리) 경우에 보통 사용된다.
• beforeEach(() => {}), afterEach(() => {}) / beforeAll(() => {}), afterAll(() => {})
• beforeEach는 테스트가 실행되기 전에 ~~하는 기능, afterEach는 테스트가 종료되면 ~~하는 기능, 즉 테스트가 성공하지 않으면 실행되지 않는다.
• 보통 React Testing Library 에서 afterEach(cleanup) 전역에서 처리해준다.

React Testing Library with Jest

import React from 'react';
import ReactDOM from 'react-dom';
import Button from './button';
import { render, cleanup } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import renderer from 'react-test-renderer';

afterEach(cleanup);
it('renders without crashing', () => {
  const button = document.createElement('button');
  ReactDOM.render(<Button />, button);
});

it('renders button', () => {
  const { getByTestId } = render(<Button label='click me please' />);
  expect(getByTestId('button')).toHaveTextContent('click me please');
});

it('matches snapshot', () => {
  const tree = renderer.create(<Button label='save'></Button>).toJSON();
  expect(tree).toMatchSnapshot();
});

it('matches snapshot', () => {
  const tree = renderer.create(<Button label='click me please'></Button>).toJSON();
  expect(tree).toMatchSnapshot();
});