Jest 웹팩과 함께 쓰기

Jest - 웹팩과 함께 쓰기

jestjs.io/docs/en/webpack

Jest · 🃏 Delightful JavaScript Testing

을 번역했습니다.

 

웹팩과 함께 쓰기

Jest는 프로젝트에서 assets, styles, compilation 을 관리하기 위해 웹팩과 함께 쓰일 수 있다.

webpack을 다른 툴들과 함께 사용하려면 특수한 관문을 넘어야 한다.

왜냐하면 webpack은 이미지나 폰트같은 stylesheet, asset 관리를 할 수 있게 앱을 직접적으로 통합하기 때문이다.

 

Webpack 예시

// webpack.config.js
module.exports = {
  module: {
    loaders: [
      {exclude: ['node_modules'], loader: 'babel', test: /\.jsx?$/},
      {loader: 'style-loader!css-loader', test: /\.css$/},
      {loader: 'url-loader', test: /\.gif$/},
      {loader: 'file-loader', test: /\.(ttf|eot|svg)$/},
    ],
  },
  resolve: {
    alias: {
      config$: './configs/app-config.js',
      react: './vendor/react-master',
    },
    extensions: ['', 'js', 'jsx'],
    modules: [
      'node_modules',
      'bower_components',
      'shared',
      '/shared/vendor/modules',
    ],
  },
};

Babel에 의해 변환된 JavaScript 파일은 babel-jest plugin을 설치해 지원할 수 있다. 

Non-Babel JavaScript 변환은 Jest의 transform config 옵션으로 설정할 수 있다.

 

 

정적 asset 관리하기

 

stylesheet나 이미지 같은 asset 파일을 우아하게 관리하기 위해서 Jest를 구성해보자.

보통, 이러한 파일들은 테스트에 특별히 유용하지 않다. 그래서 우리는 그들을 안전하게 mock out 할 수 있다.

*mock out: 적절한 역할을 해주는 어떤 것으로 대체하는 것. 자동화된 테스트에서 주로 쓰인다.

그러나, 만약 CSS Module을 사용하고 있다면 className lookups의 proxy를 mock하는 것이 더 낫다.

 

// package.json
{
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }
}

그리고 그 mock files 자체는 아래와 같다:

// __mocks__/styleMock.js

module.exports = {};

// __mocks__/fileMock.js

module.exports = 'test-file-stub';

 

CSS Module 모킹하기

ES6 프록시나 CSS Module을 사용할 수 있다:

yarn add --dev identity-obj-proxy

그러면 스타일 개체 위에 있는 모든 className lookups가 -is로 반환될 것이다. (e.g., styles.foobar === 'foobar')

이것은 React Snapshot Testing에서 꽤 편리하다.

// package.json (for CSS Modules)
{
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "identity-obj-proxy"
    }
  }
}

Proxy는 기본적으로 Node6에서 사용 가능하다. 아직 Node6를 사용하지 않는다면 Jest가 Node6를 사용하도록 하자.

node --harmony_proxies node_modules/.bin/jest.

moduleNameMapper가 잘 작동하지 않는다면, Jest의 transform config 옵션에 asset들이 어떻게 변환되는지 명시할 수 있다.

예를 들어, 파일의 basename을 반환하는 transformer는 다음과 같이 쓸 수 있다.

// fileTransformer.js
const path = require('path');

module.exports = {
  process(src, filename, config, options) {
    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
  },
};

// package.json (for custom transformers and CSS Modules)
{
  "jest": {
    "moduleNameMapper": {
      "\\.(css|less)$": "identity-obj-proxy"
    },
    "transform": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/fileTransformer.js"
    }
  }
}

Jest에게 stylesheet이나 이미지 extension에 대응하는 파일들을 무시하도록 했다.

대신에, 우리의 mock 파일들을 요구하도록 했다.

정규표현식을 당신의 webpack config가 관리하는 파일에 대응되도록 수정할 수 있다.

 

 

Jest가 우리 파일을 찾도록 구성하기

 

Jest는 우리 파일들에 어떻게 접근하는지 알게 되었다.

이제 우리는 그것을 어떻게 찾는지 알려주어야 한다.

Jest에는 moduleDirectories와 moduleFileExtensions 옵션이 존재한다.

웹팩의 modulesDirectories와 extensions 옵션을 위해 딱 좋은 옵션이다.