Karma

Karma는 모든 브라우저에서 JavaScript 코드를 테스트할 수 있게 해주는 테스트 러너이다.
Google의 AngularJS 팀이 개발했으며, 특히 브라우저 기반의 자동화된 테스트 실행에 특화되어 있다.
여러 브라우저에서 동시에 테스트를 실행하고, 실시간으로 결과를 확인할 수 있다는 점이 큰 특징이다.

정의와 목적

  • JavaScript 코드를 실제 브라우저에서 테스트할 수 있게 해주는 도구
  • 개발자에게 생산적인 테스팅 환경을 제공하는 것이 주요 목적

설정과 기본 구조

Karma의 설정은 karma.conf.js 파일을 통해 이루어진다.
기본적인 설정 파일은 다음과 같은 구조를 가진다:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

// karma.conf.js
module.exports = function(config) {
  config.set({
    // 기본 설정
    basePath: '',
    frameworks: ['jasmine'], // 사용할 테스트 프레임워크
    
    // 테스트할 파일들
    files: [
      'src/**/*.js',
      'test/**/*.spec.js'
    ],
    
    // 사용할 브라우저
    browsers: ['Chrome', 'Firefox'],
    
    // 리포터 설정
    reporters: ['progress', 'coverage'],
    
    // 포트 설정
    port: 9876,
    
    // 색상 활성화
    colors: true,
    
    // 로그 레벨
    logLevel: config.LOG_INFO,
    
    // 자동 테스트 실행
    autoWatch: true,
    
    // 한 번 실행 후 종료
    singleRun: false
  });
};

테스트 작성 예시

Karma는 다른 테스트 프레임워크(예: Jasmine, Mocha)와 함께 사용된다.
Jasmine을 사용한 테스트 예시:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// calculator.spec.js
describe('Calculator', () => {
  let calculator;
  
  beforeEach(() => {
    calculator = new Calculator();
  });
  
  it('should add two numbers correctly', () => {
    expect(calculator.add(2, 3)).toBe(5);
  });
  
  it('should handle negative numbers', () => {
    expect(calculator.add(-1, 1)).toBe(0);
  });
});

Karma의 주요 기능과 특징

  1. 멀티 브라우저 지원
    다양한 브라우저에서 동시에 테스트를 실행할 수 있다:

    1

    browsers: ['Chrome', 'Firefox', 'Safari', 'IE'],

  2. 실시간 테스트 실행
    파일이 변경될 때마다 자동으로 테스트를 실행한다:

    1
2

    autoWatch: true,
singleRun: false,

  3. 코드 커버리지 리포팅
    istanbul과 같은 도구를 통해 코드 커버리지를 측정할 수 있다:

    1
2
3
4
5

    coverageReporter: {
  type: 'html',
  dir: 'coverage/'
},
reporters: ['coverage'],

  4. 디버깅 지원
    브라우저의 개발자 도구를 사용하여 테스트를 디버깅할 수 있다:

    1
2
3
4
5
6
7

    // 디버깅을 위한 설정
client: {
  captureConsole: true,
  mocha: {
    bail: true
  }
}

Karma의 고급 기능

  1. 프리프로세서 설정
    테스트 전에 파일을 전처리할 수 있다:

    1
2
3
4

    preprocessors: {
  'src/**/*.js': ['babel'],
  'test/**/*.js': ['babel']
},

  2. 플러그인 시스템
    다양한 플러그인을 통해 기능을 확장할 수 있다:

    1
2
3
4
5

    plugins: [
  'karma-chrome-launcher',
  'karma-jasmine',
  'karma-coverage'
],

  3. CI/CD 통합
    지속적 통합 환경에서 사용하기 위한 설정:

    1
2
3
4
5
6
7

    // CI 환경용 설정
if (process.env.CI) {
  config.set({
    singleRun: true,
    browsers: ['ChromeHeadless']
  });
}

작동 방식

  • 웹 서버를 생성하여 소스 코드와 테스트 코드를 실행
  • 브라우저에 테스트 결과를 전송하고 결과를 수집하여 개발자에게 보고

장점

  • 실제 브라우저 환경에서 테스트하여 신뢰성 높은 결과 제공
  • 다양한 브라우저와 디바이스 지원으로 크로스 브라우저 테스팅 가능
  • 파일 변경 시 자동 테스트로 개발 생산성 향상
  • 설정이 간단하고 유연함

사용 방법

  • Node.js와 npm을 이용해 설치
  • karma.conf.js 파일로 설정
  • 커맨드 라인이나 IDE에서 테스트 실행 및 결과 확인

주의사항과 모범 사례

  1. 효율적인 파일 감시 설정:

    1
2
3
4
5

    // 불필요한 파일 제외
exclude: [
  'node_modules/',
  'dist/'
],

  2. 브라우저 선택 최적화:

    1
2
3
4

    // 개발 환경과 CI 환경에서 다른 브라우저 사용
browsers: process.env.CI 
  ? ['ChromeHeadless']
  : ['Chrome', 'Firefox'],

  3. 성능 최적화:

    1
2
3
4

    // 병렬 실행 설정
concurrency: Infinity,
// 타임아웃 설정
captureTimeout: 60000,

참고 및 출처

Karma - Spectacular Test Runner for Javascript