React Testing - Test basic

yarn test | npm test

• watcher로 작동해 코드 변경시마다 테스트를 동작시킬수 있다.

---

test Method

test(name, fn, timeout)

- name : 테스트의 이름
- fn : 테스트 내용이 담긴 함수
- timeout : 제한시간

import { render, screen } from '@testing-library/react';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

- App이 렌더링된 가상돔에서 learn react 라는 텍스트를 가진 Element를 찾아 존재하는지 확인하는 test 함수.
- toBeInDocument를 통해 렌더링 되었는지 확인할수 있다.

• test와 expect는 import 없이 사용 가능하다.
• test와 it은 동일하다.
  • fit == test.only
  • xit == test.skip
• test는 이름을 보통 'if ...' 로 짓고, it은 이름을 'shoud do ...' 와 같이 test 와 it이 주어자리에 오듯 짓는게 좋다.

test.only

• 여러개의 test 메소드가 담긴 파일에서 하나를 test.only로 변경시 그 test만 실행된다.

test.skip

• 여러개의 test 메소드가 담긴 파일에서 하나를 test.skip으로 변경시 그 test는 실행되지 않는다.

---

TDD - Test Driven Development

• 테스트를 먼저 작성하고 구현을 시작한다.
• 테스트를 패스 하도록 코드를 작성한다.

1. 특정 기능의 작동을 확인하는 테스트 케이스를 작성한다.
2. 테스트를 통과할 코드를 작성한다.
3. 테스트 통과를 유지하면서 코드를 최적화 및 리팩터링한다.

---

Watch mode

• jest 가 파일의 변경을 확인하고 변경된 파일에 대해서만 테스트를 새로 진행하게 된다.
• 테스트 코드와 구현 코드 변경 둘다에 반응한다.
• w 를 눌러 여러 종류를 선택할수 있다.

---

테스트 그룹 만들기

describe(name, fn)
name : 이름
fn : 실행될 함수 - test를 여러개 담을수 있다.


describe('Greet', () => {
    test('Greet renders correctly', () => {
        render(<Greet/>)
        const textElement = screen.getByText(/hello/i)
        expect(textElement).toBeInTheDocument()
    })
    
    test.skip('Greet renders with a name', () => {
        render(<Greet name='Vishwas'/>)
        const textElement = screen.getByText('Hello Vishwas')
        expect(textElement).toBeInTheDocument()
    })
})

• describe block 에도 skip, only 가 사용 가능하다.
• 다른 describe 로 describe를 그룹 지을수 있다.

---

Filename convention

• .test.js 혹은 .test.ts
• .spec.js 혹은 .spec.ts
• src 안 __tests__ 폴더 안의 .js / .tsx
• 에 테스트 코드를 둘수 있다.

---

Code coverage

• 작성된 구문이 얼마나 테스트 되었는지 확인할수 있다.

Statement coverage

• 소스코드의 각 라인이 수행되었는지 확인한다.

Branches coverage

• 분기문이 얼마나 수행되었는지 확인한다.

Function coverage

• 얼마나 많은 정의된 함수들이 실행되었는가

Line coverage

• 얼마나 많은 코드의 줄이 테스트 되었는지

var age= 18; console.log(age)
// 1 Line, 2 Statement

얻어내는 방법

• package.json 에 "coverage" : "yarn test --coverage --watchAll" 를 추가한다.
  watchAll을 추가하면 모든 파일에 대해 coverage를 알려준다.

• 각각의 code coverage를 확인할수 있다.
• 과할정도로 100% coverage를 고집 할 필요는 없다.
  • test 작성에 참조하는 정도로 사용한다.

jest가 원하는 코드만 확인하게 하는법

• --collectCoverageFrom='src/components/**/*.{ts,tsx}' 를 script 뒷부분에 추가한다.
• src/components 안에 있는 모든 ts, tsx 파일을 recursive 하게 찾아 coverage를 확인하게 된다.

• 앞에 !를 붙여 제외하게 할수도 있다.

--collectCoverageFrom='!src/components/**/*.{types,stories,constants,test,spec}.{ts,tsx}'

• 여러종류중 하나가 해당되게 하려면 중괄호와 콤마를 사용한다, 중간에 띄워쓰기는 넣으면 안된다.

coverage threshhold

• package.json 의 최 하단에 아래를 추가해 최소한의 coverage를 정할수 있다.

"jest": {
    "coverageThreshold": {
      "global": {
        "branches": 80,
        "functions": 80,
        "lines": 80,
        "statements": -10
      }
    }
  }

• 만족하지 못할시 위와 같이 오류를 보여준다.

더 쉽게 확인하기

• coverage/icov-report 안의 html 문서를 열어 자세하게 확인할수 있다.
  

---

Assertion

• 테스트시 값이 조건에 맞는지 확인한다.

expect

expect(value)
- 구현된 코드가 생성하는것을 value로 집어 넣는다.

expect(textElement).toBeInTheDocument()
// textElement가 document에 존재하는지 확인한다.

// toBeInTheDocument 는 jest-dom 에 위치한다.

expect(...).not.toBeInTheDocument()
// 없을때 테스트가 통과한다 ( not )