この記事は <a href="https://qiita.com/advent-calendar/2021/yamap-engginers" target="_blank">YAMAP エンジニア Advent Calendar 2021</a> の21日目の記事です。
<h2 id="ts-jestの課題感">ts-jestの課題感</h2>
ts-jestを使っているとコンパイル時間の問題で地味にテストに実行がかかります。
YAMAPではフロントエンドでもユニットテストを書き始めたので、約180ケースで1分ほどCIでテスト実行に時間がかかるようになりました。 
またTDDで開発を進めていると、開発中に非常に多くユニットテストを実行するので ts-jest の実行時間の遅さが開発効率に直結してきます。
そこで、ts-jest を @swc/jest に置き換えて、実行時間の改善を試みました。
<h2 id="導入効果">導入効果</h2>
@swc/jest に置き換えた結果、CIでのユニットテストの実行時間が1/2に短縮されました🎉
<table>
<thead>
<tr>
<th>変更前</th>
<th>変更後</th>
</tr>
</thead>
<tbody>
<tr>
<td>53s</td>
<td>21s</td>
</tr>
</tbody>
</table>
<h2 id="@swc/jest とは">@swc/jest とは</h2>
@sec/jest は Rust製の TypeScriptコンパイラーの swc を利用して作られた Jest の Transformer です。 
個人的に感じる @swc/jest のメリットは次の点です。
<ul>
<li>swc が Rust製のため ts-jest(tsc) と比較して、高速に動作する</li>
<li>設定を <code>jest.config.js</code> 内に書くことができるので、<code>tsconfig.test.json</code> のようにテスト用の tsconfig ファイルを持つ必要がない</li>
</ul>
<h2 id="ts-jest を @swc/jest に置き換える">ts-jest を @swc/jest に置き換える</h2>
まずはコンパイラー本体の<code>@swc/core</code>と Transformer の<code>@swc/jest</code>をインストールします。
<pre class="language-shell"><code class="language-shell">$ yarn install -D @swc/core @swc/jest
</code></pre>
変更前のJestの設定ファイルはこんな感じです。
<pre class="language-js"><code class="language-js">/** @type {import('@jest/types').Config.InitialOptions} */
module.exports = {
 preset: 'ts-jest/presets/js-with-babel',
 testEnvironment: 'jsdom',
 (省略),
 globals: {
 'ts-jest': {
 tsconfig: '&lt;rootDir>/tsconfig.test.json',
 },
 },
};
</code></pre>
これを @swc/jest を使うように変更します。 
設定ファイル内に swc の設定を追加して <code>transform</code> を @swc/jest を使うように修正しています。 
また、tsconfigは不要になったので <code>globals</code> の設定ごと削除しています。
swc の設定項目についてはコメントに記載してあります。詳細は<a href="https://swc.rs/docs/configuration/compilation" target="_blank">公式ドキュメント</a>を参照ください。
<pre class="language-js"><code class="language-js">/** @type {import('@swc/core').Config} */
const swcConfig = {
 // ソースマップの出力を有効にする
 sourceMaps: true,
 module: {
 // JestがCommonJSでモジュールを読み込むのでCommonJS形式で出力する
 type: 'commonjs',
 },
 jsc: {
 parser: {
 // TypeScriptとしてコンパイルする
 syntax: 'typescript',
 // Reactのコンポーネントをテストしたいのでtsxのコンパイルを有効化
 tsx: true,
 },
 transform: {
 react: {
 // React の JSX トランスフォームの指定
 // Reactインポートの手間を省略するために React17 から導入された 
 // _jsx(react/jsx-runtime) の形式にコンパイルする
 runtime: 'automatic',
 },
 },
 },
};

/** @type {import('@jest/types').Config.InitialOptions} */
module.exports = {
 transform: {
 '^.+\\.(t|j)sx?$': ['@swc/jest', swcConfig],
 },
 (省略),
};
</code></pre>
<h2 id="コンパイラーが異なることによる懸念">コンパイラーが異なることによる懸念</h2>
babelで設定を書いている影響でプロダクションのコンパイルは引き続き tsc を使用しており、テストとプロダクションの実行環境でコンパイラーが異なる状況になってしまっています。コンパイラー依存の問題でテストでは正常に動くみたいな事が起こる可能性はあるかもとという懸念は少し持っています。
ただ、それによるバグが起こる可能性はかなり低くテスト実行の速度向上による開発効率化の方がメリットが大きいと判断しているので、そこは許容範囲かなと考えています。
<h2 id="さいごに">さいごに</h2>
思ったよりもスムーズに導入ができて特に問題が発生することもなく、今までと変わらずにテスト実行が使い続けれているので、導入して良かったです。

この記事は YAMAP エンジニア Advent Calendar 2021 の21日目の記事です。ts-jestを使っているとコンパイル時間の問題で地味にテストに実行がかかります。YAMAPではフロントエンドでもユニットテストを書き始めたので、約180ケースで1分ほどCIでテスト実行に時間がかかるようになりました。またTDDで開発を進めていると、開発中に非常に多くユニットテストを実行するので ts-jest の実行時間の遅さが、開発効率に直結してきます。そこで、ts-jest を @swc/jest に置き換えて、実行時間の改善を試みました。

実務でts-jestを@swc/jestに置き換えてCIの実行時間を1/2に短縮した

この記事はタイムリープTypeScript 〜TypeScript始めたてのあの頃に知っておきたかったこと〜の5日目の記事です。自分がTypeScriptを書き始めた頃に苦労したのが、Jestでテストを書くときのモックの型をどう書けば良いか分からないことでした。

TypeScript+Jestでテストを書くときに型安全にモックする方法を教えてほしかった

神奈川の田舎で働いてるフロントエンドエンジニアのブログ