Karma + Jasmine 테스트 환경 구축 (+ typescript, es6 module)

Karma + Jasmine 환경 설정

Karma는 실제 브라우저에서 테스트를 진행할 수 있도록 해주는 Test-Runner이며, Jasmine은 Karma와 같은 Test Runner 환경에서 돌아가는 행동 기반의 자바스크립트 테스팅 프레임워크이다.

 

먼저 Karma와 Karma에서 돌아갈 Jasmine 의존성을 설치한다.

npm i -D karma karma-jasmine karma-safari-launcher

그다음 karma 설정 파일을 생성해준다.

 

공식문서에 따르면, 따로 arg를 주지 않는 이상

• ./karma.conf.js
• ./karma.conf.coffee
• ./karma.conf.ts
• ./.config/karma.conf.js
• ./.config/karma.conf.coffee
• ./.config/karma.conf.ts

이 중 하나를 찾아서 참고한다고 하기 때문에 무난하게 karma.conf.js 이름으로 파일을 만들어 준다.

 

참고로 아래와 같은 명령으로 설정 파일을 쉽게 생성할 수 있다.

karma init ${파일 이름}

그 후 필요한 세부 설정들을 마친다.

 

중요한 몇 가지 설정을 알아보면

• files: browser에서 로드할 파일들을 명시
• exclude: 제외할 파일
• framewords: 사용할 프레임 워크들
• port: 웹 서버 포트
• browsers: 테스트할 브라우저 목록 (크롬, 사파리, 파이어 폭스 등)

등이 있다.

TypeScript와 ES6 module import/export 사용 설정

그냥 저 상태로는 일반적인 .js 파일만 사용할 수있다. .ts 파일을 사용하고 싶다면 tsc 명령어로 컴파일 한 다음에 사용할 수 있는 방법이 있지만, import와 export 등으로 다른 파일에서 함수 등을 가져와 테스트하는 코드를 작성해서 테스트할 수 없다.

 

왜냐하면 브라우저에서 동작하기 때문에 commonjs 모듈 형식으로 바꾸어도 이를 인식하지 못하고, import/export를 그대로 사용해도 karma가 파일을 불러와 브라우저로 로드할 때 module 타입으로 인식하지 않기 때문이다.

 

즉, 이 두 가지를 가능하게 하려면 webpack 설정으로 번들링을 해주어야 했고, 그 과정에서 ts-loader를 통해 typescript를 컴파일해주는 과정이 필요했다.

 

karma는 테스트할 파일을 로드할 때 pre-processing 해주는 과정을 거치는데, 이때 무슨 동작을 할지 설정해주는 부분을 설정 파일에서 정의해줄 수 있다.

 

이를 정의하기 위해서 먼저 필요한 의존성을 다운로드한다.

npm i -D karma-webpack ts-loader

그 뒤, ts-loader에서 사용할 tsconfig.json을 정의해준다. 파일이 없으면 karma-webpack이 ts-loader를 실행할 때 에러가 난다.

(tsconfig.json 파일만 있으면 그 내용을 전부 주석 처리해도 동작하긴 한다.)

 

그리고 karma.config.js 설정 파일에서 webpack이라는 이름으로 웹팩 설정을 해줘야 한다.

const defaultWebpackOptions = {
  mode: 'development',
  resolve: {
    extensions: ['', '.js', '.ts'],
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'karma'),
  },
  module: {
  	// 타입스크립트를 사용하기 위한 설정
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
      },
    ],
  },
  stats: {
    modules: true,
    colors: true,
  },
  watch: false,
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      minSize: 0,
      cacheGroups: {
        commons: {
          name: 'commons',
          chunks: 'initial',
          minChunks: 1,
        },
      },
    },
  },
  plugins: [],
};

module.exports = function (config) {
  config.set({
  	// ...
    
    plugins: ['karma-webpack', 'karma-jasmine', 'karma-chrome-launcher'],	// 필요한 플러그인들을 추가해주지 않으면 제대로 실행 안됨 (예를 들어 chrome launcher 추가를 안하면 크롬 실행을 못함)
    
    frameworks: ['jasmine', 'webpack'],	// 'webpack 추가'
        
    preprocessors: {
      './src/test/**/*.test.ts': ['webpack'],	// 'preprocessors에 webpack 추가'
    },

    webpack: defaultWebpackOptions,	// 'webpack option 추가'
    
    // ...
  });
};

테스트

디렉터리 구조

테스트하기 위해서 간단하게 더하기, 빼기 결과를 반환하는 함수 두 개를 만든 뒤, 이를 import 해서 chrome과 Safari 브라우저에서 테스트해보았다.

 

// add.ts
export function add(a: number, b: number): number {
  return a + b;
}

// minus.ts
export function minus(a: number, b: number): number {
  return a - b;
}

// add.test.ts
import { add } from '../util/add';

describe('testing add suites', () => {
  it('add(3,3) should return 6', () => {
    expect(add(3, 3)).toBe(6);
  });

  it('add(3,5) should return 8', () => {
    expect(add(3, 5)).toBe(8);
  });
});

// minus.test.ts
import { minus } from '../util/minus';

describe('minus describe', () => {
  it('minus(6, 3) should be 3', () => {
    expect(minus(6, 3)).toBe(3);
  });

  it('minus(1, 3) should be -2', () => {
    expect(minus(1, 3)).toBe(-2);
  });

  it('minus(0, 3) should be -3 (intentionally wrong case)', () => {
    expect(minus(0, 3)).toBe(-2);
  });
});

karma start

일부러 틀린 결과를 테스트한 결과

테스트가 총 5개였는데, 브라우저를 두 개로 돌렸기 때문에 총 10개의 테스트가 진행된 것으로 보이고 있다.

 

그리고 일부러 틀리게 작성한 케이스 1개씩 FAIL 했다는 것을 알려주고 있는 것을 확인할 수 있다.

 

minuse.test.ts의 마지막 테스트 케이스를 올바르게 고쳐주면

테스트 케이스를 올바르게고친 후

모두 통과된 결과를 확인할 수 있다.

참고한 자료

• Webpack Configuration

Configuration | webpack

• Karma 6.4 Docs

Karma - Configuration

• karma-webpack docs

karma-webpack