2024-09-11
Elmによるテスト戦略
Elmでのテスト
参考資料
Elm-test
https://package.elm-lang.org/packages/elm-explorations/test/latest/
node-test-runner
https://github.com/rtfeldman/node-test-runner
利用するプロジェクト
https://karan-dev-blog.com/blog/cu-h1qb_nu
概要
Elm自体が純粋関数や型システムが強力なため，テストが非常に有効である。
またコンパイル時の問題発見に加えロジックの誤りや期待通りの動作を確認できるようになり信頼性が増すプロダクト開発ができる。
さらにテストしづらいイメージのある副作用部分であるCmdやSubについてもそれ自体は副作用を起こさないためテストしやすくなっている。
これ自体がElmで堅牢性が増す要因の一つかなと思っている。
Reactとの違い
ReactもElmもそれぞれUIのレンダリング部分と状態管理やロジック部分を分離できるという意味では共通しているがアプローチに違いがあるように感じる。
React
- useStateなどを利用してコンポーネントから分離
- 副作用の部分はuseEffectを利用し，複雑な状態管理はReduxやZustandなどのツールやContext APIを利用することが多い
このように公式から提供されているAPIと様々なエコシステムを活用できる。
また手軽にグローバル管理できるなどの柔軟性を持っているように感じる。
Elm
- ロジックとUIの分離は純粋関数
- UIはView関数で表現され，ロジック部分はUpdate関数やModelで管理
- 副作用なCmdやSubで明示的に管理
どちらかというと明確に分離していることによって言語レベルで自然に表現できているなと感じる。
Reactに比べて副作用の範囲を最小限に食い止められるように感じる。
実践
こちらで作成したプロジェクトに今回は追加していく。
また今回はバックエンドは利用せずフロントエンドプロジェクトで完結となる。
コマンドラインの追加
これでルートプロジェクトのPackage.jsonの方に追記していく。
npm install --save-dev elm-testこれでnpx elm-testコマンドが利用可能になる。
このコマンドだけで現在の存在しているElmのテストコード全てをテストできるようになる。
基本的にはJestのコマンドラインと同じようなものだと感じる
パッケージの追加
必要なパッケージをインストールしていく。
このパッケージを利用することによってテストコードの記述が可能になる。
elm install elm-explorations/testサンプルコードの追加
簡単なサンプルである，引数を足し算して合計値を返す関数を作成してテストする。
module Math exposing (add)
add : Int -> Int -> Int
add x y =
x + yテストコードの作成
このように値が5になるかと2になるかのテストを記述する。
書き方自体には少し慣れが必要だと思うが個人的にはパッとコードを見てどのようなことをしているかはわかりやすいなと思っている。
module MathTests exposing (tests)
import Expect
import Math exposing (add)
import Test exposing (..)
tests : Test
tests =
describe "Math.add"
[ test "2 + 3 is 5"
(\_ ->
-- カッコありの書き方
Expect.equal 5 (add 2 3)
)
, test "1 + 1 is 2" <|
\_ ->
-- カッコ省略の書き方
Expect.equal 2 (add 1 1)
]テスト実行
npx elm-test
Compiling > Starting tests
elm-test 0.19.1-revision12
--------------------------
Running 2 tests. To reproduce these results, run: elm-test --fuzz 100 --seed 277597156452085
TEST RUN PASSED
Duration: 496 ms
Passed: 2
Failed: 0