Mocha HTML 브라우저 테스트 러너 치트 시트

브라우저 내부에서 Mocha를 직접 실행하면 헤드리스 에뮬레이션 없이 DOM API, CSS 레이아웃 및 웹 플랫폼 기능을 테스트할 수 있습니다.

독립형 HTML 러너 템플릿

이 파일을 test/index.html로 저장한 뒤 아무 브라우저에서나 직접 여세요:

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>Mocha Browser Test Suite</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css" />
</head>
<body>
  <!-- Mocha가 테스트 결과를 렌더링할 컨테이너 -->
  <div id="mocha"></div>

  <!-- 테스트 프레임워크 및 단언(Assertion) 라이브러리 -->
  <script src="https://unpkg.com/mocha/mocha.js"></script>
  <script src="https://unpkg.com/chai/chai.js"></script>

  <script>
    // Mocha BDD 모드 초기화
    mocha.setup('bdd');
    window.expect = chai.expect;
  </script>

  <!-- 테스트 대상 소스 코드 -->
  <script src="../src/calculator.js"></script>

  <!-- 테스트 스위트 파일 -->
  <script src="calculator.test.js"></script>

  <script>
    // 테스트 스위트 실행
    mocha.run();
  </script>
</body>
</html>

---

브라우저 테스트 파일 예제

test/calculator.test.js 파일:

describe('Browser Calculator', () => {
  it('adds numbers accurately', () => {
    expect(Calculator.add(2, 3)).to.equal(5);
  });

  it('inspects DOM elements', () => {
    const el = document.createElement('div');
    el.id = 'target';
    document.body.appendChild(el);

    expect(document.getElementById('target')).to.not.be.null;
    document.body.removeChild(el);
  });
});

---

참고 자료

• Mocha BDD 치트 시트
• Chai 치트 시트
• 브라우저에서 Mocha 실행 가이드