[React / Testing] 현명하게 테스트하기 / Mocha 실패기(+React, Mocha 튜토리얼)

가장 많이쓰는 테스팅 툴은 Jest라고 알려져있지만 Mocha도 그 못지 않게 오래된 역사를 가지고 있는 듯 하다.

 

https://mochajs.org/

Mocha - the fun, simple, flexible JavaScript test framework

2011년에 발행된 모카는 가장 최근에는 2022년 5월에 업데이트 되었다. 버전은 10.0.0 이 최신버전이다.

 

위 링크에 접속해서 documentation을 참고하면 간단한 설치부터 테스팅까지 경험할 수 있다.

 

 

나는 개인적으로 React에서 모카를 사용하기 위해 어떤 과정을 거쳤고 어디서 막혔는지 과정을 써보려고 한다.

 

 

 

 

1. 여러가지 Dependency와 라이브러리 설치

리액트는 html을 그대로 사용하는 것이 아니고 Render의 Virtual dom을 사용한다.

 

게다가 순수 js나 태그가 아닌 jsx를 거쳐 세상에 나오기 때문에 babel(예전 코드로 자동 해석), jsdom(virtaul dom 환경처럼 만들어줌)이 필요하다.

 

React를 쓰지 않았다면 이런걸 다운받지 않아도 되었겠지 ? ㅠㅎㅎㅎㅎㅎㅎ

 

 

 

 

 

**필요한 babel 라이브러리**
    "babel-core": "^6.26.3",
    "babel-loader": "^9.1.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.26.0",

위 babel에 관련된 라이브러리들을 설치해준다. 브라우저의 호환을 위해 필요하다.

 

 

 

 

 

**mocha에 필요한 라이브러리**
    "chai": "^4.3.7",
    "jsdom": "21.1.0",
    "jsdom-global": "3.0.2",
    "mocha": "^8.3.0",
    "mocha-jsdom": "^2.0.0",

여기서 mocha를 사용할때는 반드시 assertion library인 chai를 사용해야 함을 알 수 있다.

 

왜냐하면 mocha라이브러리를 그대로 제공해주는 것이 아니라 이 라이브러리를 이용해 테스팅 할 수 있도록 돕기때문에 따로 설치해줘야 하는 것이다.(라이브러리 많아지는 거 싫어..머리아파...)

 

 

jsdom은 위에 설명한것처럼 react 구동환경이 웹에서 구동하는 것 처럼 보여주기 위해 필요하다.

 

 

 

 

위 라이브러리 들이 모두 올바르게 설치되어야 컴파일 에러가 나지 않는다.

 

 

 

 

2. 적당한 폴더에 *.test.js 파일 생성

mocha는 뒤에 파일명을 명시하지 않으면 자동으로 test가 이름으로 등록된 파일(test.js만 가능)을 찾아주지 않는다. 그렇기 때문에 dot(.)이 여러개 들어가는 경우라면 뒤에 파일명을 명시해줘야 한다.

 

나는 App.test.js라고 명시하였다.

import React from "react"; //필요한 라이브러리 import
import ReactDOM from "react-dom";
import { act } from "react-dom/test-utils";
import { expect } from "chai";
var jsdom = require("mocha-jsdom");

global.document = jsdom({
  url: "http://localhost:3000/"
});

global.TextEncoder = null;

let rootContainer;

beforeEach(() => {
  rootContainer = document.createElement("div");
  document.body.appendChild(rootContainer);
});

afterEach(() => {
  document.body.removeChild(rootContainer);
  rootContainer = null;
});

describe("App Component Testing", () => {
  it("Renders Hello World Title", () => {
    act(() => {
      ReactDOM.render(<App />, rootContainer);
    });
    const h1 = rootContainer.querySelector("h1");
    expect(h1.textContent).to.equal("Hello World2");
  });
});

 

 

 

 

 

 

3. package.json 명령어 추가하기

간단한 js파일이라면 npm mocha를 실행하면 되지만 불행하게도 react는 이것저것 옵션을 달아줘야 하는 부분이 많다.

 

흑흑 리액트 이녀석..쉽지 않구나..

 

"test" : "mocha --watch -r jsdom-global/register --r babel-register ./src/App.test.js"

scripts아래 부분에 추가하면 된다.

 

옵션들을 아주 간력하게 소개하면 이 정도 된다.

- jsdom ~과 babel ~부분은 컴파일 옵션

- watch는 끊기지 않고 계속 테스트할 수 있도록 노드를 살려두는 용도

 

이제 npm test / yarn test를 입력하면 테스트 환경을 실행할 수 있다.

 

 

 

 

 

4. 내가 mocha를 포기한 이유

현재 내가 사용하고 있는 node버전은 10.0이다..

 

그런데 자꾸 뜨던에러

 

TextEncoder is not supported !!!

 

뭔가 싶어서 한참을 검색해 봤는데 jsdom이 파싱을 할때 해당하는 함수를 찾을 수 없어 해매는 듯하댔다.

다시 폭풍서칭..

 

TextEncoder는 node js 11부터 지원한다는 청천병력같은 이야기 ㅠㅠ

이거하자고 노드버전을 바꿀수는 없는 노릇이라 jasmine으로 넘어가야 겠다고 생각했다..

 

정말 열심히 했는데 아쉽다.

 

일단 mocha이전버전으로 다시 해보지는 않아서 조금만 더 해보고 안되면 다음 라이브러리 실험으로 넘어갈 예정이다.

 

 

 

 

언젠가는 되겠지..?