babel-plugin-remove-test-code について

テストコード(と思われるもの)を消す Babel Plugin を作りました。
これを使うと ES/TS においてもこのようなスタイルで書けます。

1
2
3
4
5
6
7
function foo() { return 1; }

export default foo;

it("???", () => {
expect(foo()).toBe(1);
});

プラグインは次のコマンドでインストールできます。

yarn add -D babel-plugin-remove-test-code

ツールというよりもコンセプトという感じです。実際に Jest では import したファイルにテストコードがあると実行してしまう仕様があり、多重実行してしまうところがあります。

続きには経緯を書いてあります。

React で JSX と CSS in JS を使う状況であれば、構造・スタイル・処理のすべてを 1 ファイルにまとめることができます。 Vue でも単一ファイルコンポーネントがあります。
対して ES/TS の単体テストは外部ファイルに書くのが通常の書き方です。これ自体は良いですが、テスト対象はすべて export 指定する必要があります。 public な対象にだけテストがあれば十分という考えからすれば理にかなっています。ただし、もし内部メソッドをテストしたい場合はそれを export してテストを書き始めますが、当然ながら利用してほしくないメソッドを意図せず使われてしまう可能性もあります。内部構造を変えたときに破壊的変更になってしまうのは避けなければなりません。

コンポーネントとして公開したい対象を絞る方法として ‘package.json’ をコンポーネントのディレクトリごとに設置する方法があります。単一ファイルにすべてがまとめられている状況で ‘Component/index.js’ と ‘Component/package.json’ をそれぞれ(小さな単位である)コンポーネント単位で作るのは面倒に感じます。

そうではなくて、単一ファイルから一線を超え、単体テストのコードも一緒のファイルに書いてしまって内部メソッドを export せず済むようにして、テストコードはビルド時に( Babel 等で)消せばよいのでは?、という着想からこの Babel Plugin を作りました。