Babel7+power-assertのセットアップ #JavaScript

やりたいこと

コード中での事前条件・事後条件の検証や、テストコードでのアサーションにpower-assertを利用したい。

ただし、本番リリース時は、コード中から表明を取り除きたい。

想定

テストフレームワークはMochaを使います。
ソースコードは、srcディレクトリに配置します。ユニットテストコードは、テスト対象のコードと同じディレクトリに配置します。(src/**/*.test.jsのような形式)
JSXやES Modulesにも対応したい。

セットアップ

モジュールのインストール

$ yarn add --dev @babel/cli @babel/core babel-plugin-unassert babel-preset-power-assert @babel/register 
 mocha @babel/plugin-transform-modules-commonjs @babel/preset-react

Babelの設定

プロジェクトルートにbabel.config.jsを用意します。

babel.config.js

module.exports = function(api) {
  api.cache.invalidate(() => process.env.NODE_ENV);

  const plugins = ['@babel/plugin-transform-modules-commonjs']; // ES ModulesをCommon JS形式に置き換える
  const presets = [
    ['@babel/preset-react', {'pragma': 'createElement'}] // JSXをコンパイルするため
  ];

  if (api.env('production')) {
    plugins.push('babel-plugin-unassert');
  } else {
    presets.push('power-assert');
  }

  return { plugins, presets };
}

重要なのは以下の部分で、production環境でのみbabel-plugin-unassertを読み込み、それ以外の環境ではbabel-preset-power-assertを読み込むように設定しています。

  if (api.env('production')) {
    plugins.push('babel-plugin-unassert');
  } else {
    presets.push('power-assert');
  }

npm-scriptsを用意する

package.jsonに以下の記述を追加します。

package.json

  "scripts": {
    "build": "NODE_ENV=production babel src --out-dir lib --ignore './src/**/*.test.js'",
    "watch": "babel src --verbose --watch --out-dir lib --ignore './src/**/*.test.js'",
    "test": "mocha -r @babel/register ./src/**/*.test.js",
  },

開発時はyarn run watch、本番リリース時はyarn run buildでビルドします。

NODE_ENV=productionの指定によって、本番リリース時は、ソースコード中から表明が取り除かれます。

動作確認

テストコードを用意します。

src/index.test.js

import assert from 'assert';

const add = (a, b) => {};

describe('add', () => {
  it('should add two numbers', () => {
    assert(add(1, 2) === 3);
  });
});

yarn run testでテストを実行します。

$ yarn run test
yarn run v1.15.2
$ mocha -r @babel/register ./src/**/*.test.js


  add
    1) should add two numbers


  0 passing (24ms)
  1 failing

  1) add
       should add two numbers:

      AssertionError [ERR_ASSERTION]:   # src/index.test.js:7

  assert(add(1, 2) === 3)
         |         |     
         undefined false 

  [number] 3
  => 3
  [undefined] add(1, 2)
  => undefined

      + expected - actual

      -false
      +true

終わりに

power-assertは初めて使いましたが、エラーメッセージが詳細で、とても便利だと思いました。

補足

以下、インストールしたモジュールのバージョンです。

@babel/cli - v7.4.4
@babel/core - v7.4.4
@babel/register - v7.4.4
babel-plugin-unassert - v3.0.0
babel-preset-power-assert - v3.0.0
@babel/plugin-transform-modules-commonjs - v7.4.4
@babel/preset-react - v7.0.0
mocha - v6.1.4

参考

以下を参考にさせていただきました。