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

公開日:2019-04-28
最終更新:2019-04-28
※この記事は外部サイト(https://qiita.com/uki00a/items/78f1d54ced9...)からのクロス投稿です

やりたいこと

コード中での事前条件・事後条件の検証や、テストコードでのアサーションに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を用意します。

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に以下の記述を追加します。

  "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の指定によって、本番リリース時は、ソースコード中から表明が取り除かれます。

動作確認

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

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

参考

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

記事が少しでもいいなと思ったらクラップを送ってみよう!
18
+1
@uki00aの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする