[React] React-Testing-Library 를 이용한 TDD

회사에서 TDD 스터디가 열려서, 프론트엔드 TDD 유투브 영상, 블로그 등을 공부를 하고 직접 한 번 TDD 를 해봤다. 영상과 블로그 등을 통해 알게된 TDD 의 장단점은 다음과 같다.

TDD 장점

1. 피드백 루프 테스트 결과만 보면 브라우저 직접 확인할 일이 적어진다.

2. 관심사 기반 개발이 가능해 진다. 1). 관심사 분류를 잘 하면 앱이 작아진다. 2). 서로 상태에 대한 관심을 분산시켜야 한다.

3. 의존성이 적어진다. 요구사항을 명확하게 할 수 있다. 나 대신에 내가 새로 추가한 기능이 다른 기능에도 나 모르게 영향을 줄 수 있는데, TDD 를 하면 그것을 막아줄 수 있다.

4. 오버 엔지니어링을 막아줄 수 있다.

5. 문서 역할을 한다.

TDD 단점

1. 코드 생산 시간이 길어진다. (내가 모르는 TDD 단점이 있을 수 있다.)

장단점을 공부하면서 느낀 것은, 모든 상황에서 TDD가 정답은 아니라는 것이다. 내가 생각했을 때 도입할 때 고려해야 할 중요한 기준은 회사의 비즈니스 상황인 것 같다.

TDD, 직접 해보았습니다.

궁금해서 TDD 로 아주 작은 개발을 해보았다. 요새 Canvas API 에 관심이 생겨서, 튜토리얼을 시작했는데, 이걸 리액트로 구현하는 것을 TDD 로 해보았다.

React-Testing-Library, CRA 넌 못하는게 없구나

개발을 시작하기 전에 우선 RTL (React-Testing-Library) 에 대해 좀 더 알고 싶었다. RTL 은 Kent C. Dodds 가 개발한 React testing tool 로, airbnb 의 enzyme 의 대체재로 알려지고 있다고 한다.

RTL vs Enzyme

⇒ 공식 문서는 DOM Testing library 임을 강조하고 있다. React component 인스턴스가 아니라, 테스트는 실제 브라우저에 그려진 DOM nodes 를 이용해 이루어진다. RTL 라이브러리는 실제 유저의 행동과 동일하게 DOM 을 찾아다니며 의도대로 그려졌는 지를 확인한다.

⇒ Enzyme 이 React component 관점에서 잘 실행이 되었는 지를 테스트하는 툴이라면, RTL 은 엔드유저 입장에서 개발자의 의도대로 화면이 보이는 지를 테스트 하는 툴이다.

RTL vs Jest

반면에, Jest 는 RTL 과 보완관계이다. React 를 안 써봤다고 해도 javascript application 에서 테스트를 해본 사람들 중 대부분은 아래와 같은 코드를 본 적이 있을 것이다.

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

위 코드를 test-suit 이라한다. 테스트하는 개요를 describe 해주고, 테스트해서 나오는 기대값을 비교해주는 코드를 담는다.

오케이.. 이제 어느정도 RTL 아이디어는 이해가 되었다. 간단히 빨간색 사각형을 그리는 걸로 첫 TDD 를 해본다.

직접 해보기

create-react-app 하면 자동으로

@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10",

세 개가 설치 되어 있다. 요즘 세상 편하다 👍 이미 create-react-app 을 통해 만들어 쓰고 있던 React 레포가 있어서, 거기에 RTL 을 설치하려고 보니 이미 default 로 깔려져 있었다.

canvas.test.js 파일을 먼저 만든다.

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

import RedRectangle from './RedRectangle';


describe('RedRectangle', () => {
  test('renders RedRectangle', () => {
    render(<RedRectangle />);
  })
})

import React from 'react';

const RedRectangle = () => {  
  return (
    <div></div>
  )
};

export default RedRectangle;

만들고, 다시 테스트.

테스트 통과하여 다음엔 canvas 엘리먼트를 넣기 전에, canvas element 가 DOM 에 그려졌는지 확인하는 테스트 코드를 짠다.

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

import RedRectangle from './RedRectangle';

describe('RedRectangle', () => {
  test('renders RedRectangle', () => {
    render(<RedRectangle />);
  })

  test('render canvas element', () => {
    screen.getByTestId('canvas'); // 화면에 dataset id = cavas 인 element 가 있는지 확인해준다.
  })
})

결과는 당연히 FAIL (아직 안 만들어줬으니까)

그래서 Canvas 컴포넌트를 생성했다.

import React, {useRef, useEffect } from 'react';

const Canvas = ({draw, height, width}) => {
  const canvas = useRef(null);

  useEffect(() => {
    const context = canvas.current.getContext('2d');
    draw(context);
  });

  return (
    <canvas ref={canvas} height={height} width={width} />
  );
};

export default Canvas;

그리고 위 Canvas 컴포넌트를 import 해서

import React from 'react';
import Canvas from './Canvas';

const RedRectangle = () => {
  const draw = (context) => {
    // context.fillRect(x, y, width, height) -> x, y 는 시작 좌표.
    context.fillStyle = "red";
    context.fillRect(100, 100, 400, 300);
  }

  return (
    <Canvas draw={draw} width={800} height={600} />
  )
};

export default RedRectangle;

빨간 사각형을 그려봤는데,

이렇게 브라우저에는 잘 렌더링 되지만, 테스트는 깨진다.

npm start 를 해서 context 를 찍어보면 아래처럼 잘 나온다. 왜 테스트에서는 못 받을까?

원인은 canvas api 는 브라우저 dom 에 그려지는 것인데, RTL 과 jest 는 jsdom 이라는 가짜 돔 (테스트를 위한 부분만 추려오는) 을 가지고 테스트를 하지, 진짜 브라우저와는 상관이 없기 때문에 Canvas element 를 못 찾는 것이었다.

검색해보니, canvas 엘리먼트 테스트 라이브러리로 https://www.npmjs.com/package/jest-canvas-mock 가 있었다. 그런데 jest-canvas-mock 은 내 리액트 앱인 CRA react-script 4+ 버전에서 충돌문제가 있어서, node 에서 canvas 돔에 접근하게 해주는 node-canvas 라이브러리를 설치했더니 테스트가 성공하였다. 🥳

📔 레퍼런스 RTL

https://www.robinwieruch.de/react-testing-library/

https://testing-library.com/docs/react-testing-library/intro/#tutorials

react - canvas 그리기

https://velog.io/@mokyoungg/React-React에서-Canvas-사용하기마우스-그리기