React(TypeScript) APP: jest 세팅(3)

jest + react testing library 설치

jest 는 test framework로 널리 알려져있다. 간단한 특징은 다음과 같다.

• 간편한 사용법
• unit test 용이한 기능
• react 지원

그러나 react와 typescript를 테스트하려면 추가적인 설정이 필요하다.
react component 테스트를 위해서 react에서 공식적으로 사용하라는 library로 세팅을 진행하였다.

설치

• jest를 설치하면서 react testing library도 설치한다.
  • 테스팅 라이브러리라고 하면 두 라이브러리가 대안이라고 생각하지만 그렇지않다.
  • jest를 기본으로 react component test를 쉽게 하도록 해주는 것이 react testing library이다.

npm install --save-dev jest
npm install --save-dev @testing-library/react

• 환경설정은 babel을 이용했다.
  • 현재 프로젝트에서 webpack과 babel을 사용 중이다.

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-jest @babel/preset-typescript react-test-renderer jest-environment-jsdom

// conf/babel.conf.js

module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-typescript", "@babel/preset-react"]
};

• 그리고 App 호출 파일을 테스트하는 jest 파일을 생성하였다.

//__tests__/App.test.tsx
import React from 'react';
import { render, screen } from '@testing-library/react';

import App from '../src/pages/App';
import { Provider } from 'react-redux';

import { store } from '../src/redux/store';

describe('my function or component', () => {
  test('does the following', () => {});
});

describe('true is truthy and false falsy', () => {
  test('true is truthy', () => {
    expect(true).toBe(true);
  });

  test('false is falsy', () => {
    expect(false).toBe(false);
  });
});

describe('App', () => {
  test('renders App component', () => {
    render(
      <Provider store={store}> // mock으로 store를 만들 수 있으나, 일단 기본 설치 테스트로 root sotre 추가
        <App />
      </Provider>
    );
  });
});

• 그랬는데 jsx를 인식하지 못 하는 문제가 생겼다. 뭔가 옵션 설정이 제대로 되지 않았다.

Support for the experimental syntax 'jsx' isn't currently enabled

• 원인은 babel config file을 babel에서 자동으로 인식하는 file name과 달라 jest에도 babel-jest의 configure 위치를 잡아줘야 했다
  • babel default file detecting 규칙과 다르게 config file을 생성해서이다.
  • jest 실행 시 --config 옵션을 줘야했다.

// conf/jest.config.js

const path = require("path");

module.exports = {
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { configFile: './conf/babel.conf.js' }]
  },
  roots: ['..'],
  testEnvironment: 'jest-environment-jsdom',
};

• 성공하면 이렇게 나온다.

---

여담

• tutorial에서 jest-environment-jsdom을 설치하라는 command가 친절히 설명되어있지 않다. 그래서 test를 실행하니 jsdom을 설치하라는 오류가 떠서, jest-environment-jsdom과 jsdom 중 무엇을 써야하는지 혼란스러웠다. 그러나 jest를 쓰니까 jest-environment-jsdom을 설치하였는데 여전히 의문점은 무슨 차이가 있는가였다.

• 그래서 조금 더 찾아 비교해보았다.
  • jsdom
    • Node에서 실행되는 순수 자바 구현물로, DOM과 browser API로 구현되어 있다고 한다.
    • 표준 브라우저 웹처럼 동작하나 layout이나 navigation 같은 특징은 없다고 한다.
  • jest-environment-jsdom
    • jsdom을 jest에서 버전을 지정해서 배포하는 것으로 보인다.
    • 큰 설명은 없으나 github에서 내부적으로 jsdom 버전을 지속적으로 업데이트 하고 이슈 처리는 거의 없는 것으로 보아, dependancy나 새로운 기능에 대한 오류를 염두해서이지 않을까... 추측해본다.

Test 필요성

업무를 하다 보면 생각보다 많은 사람들이 test가 필요한 이유에 대해 깊이 생각하지 않는 것 같다.
기능을 구현하면 단계적인 function, 모듈, 등 작은 단위로 나눠질 수 있다는 것을 알 수 있다.
흔하게 현금 인출 기능이라고 한다면, 사용자 인증 -> 현금 인출 액수 입력 -> 서버 통신/인증 -> 승인 -> 현금 반환 등 이런 식으로 나누면 세부 기능이 나뉜다는 의미이다.
만약 버그가 생긴다면 특정 기능의 어느 부분에서 생겼는지 알아야 하는데 그 과정을 쉽게 도와주는 것이 test가 아닌가 한다.
쉽게 접하는 단어는 unit test, end to end test로 test 종류를 나눈다.

• unit test
  • 테스트 단위를 함수와 같이 작은 단위로 나누어 테스트 하는 방법
  • 동작 단계를 나누어 테스트 케이스를 작성하여 개발과정 중 문제 파악 용이
• end to end test
  • end user 입장에서 페이지가 정상 동작하는지 테스트 하는 방법
  • UI test로도 불리는 방법
  • 테스트 작성과 실행 비용이 많이 드는 방법