React.jsでSPAを作った後にテストを書いた（散文）

SPAの構造

React.jsの練習がてら、某プロダクトのコピーSPAを作りました。 Three.jsでぬるぬる動く。 https://ixap2i.github.io/try-react-app/

ほとんどメインの動画部分や素材に力を入れていた為、力の配分が素材やCSS多めになってしまった…

1週間くらいで一気に作り上げたので、人に見せたところ「ちょっとCSSの設計が…？」とのような感想もいただいてしまい、見直す目的でちょっとテストを書いています。

よかったことは、htmlタグの階層や命名を見直せたところや、無駄なCSSがあったのを消せたところかなあ。 sectionタグは入れ子にして使ってもよかった

静的なコンテンツしか今回は扱っていないので…APIやデータオブジェクトのテストは書いてない。 反省としては、この要素やコンテンツは存在しているか？という内容の浅いテストになってしまった。

（セットアップに思ったよりてこずったんだもの…←これはテストコードがライブラリを参照する際に起こるエラーで、テスト用のモックアップを差し込めば解決しました。）

Jestを使ってみたけど、jest.comfig.jsとsetup-jest.jsを別々に作る必要がある。 前者は特定のjsファイルがどの階層のモックアップを参照するか指定できたり、モジュールの拡張子などを指定できたりする。よく知っている形式の環境設定ファイル。 後者はわざわざ別に作って、"setupFilesAfterEnv"というプロパティでテストをするときに使用するライブラリを書き連ねている。

import '@testing-library/jest-dom'
import '@testing-library/dom'
import '@testing-library/jest-dom/extend-expect';
import 'mutationobserver-shim';

setup-jest.js↑

こんな感じに。これがないとtoContainElementなどのアサーションする関数を呼べないのだ。もちろん個別にファイルの中でimportすれば呼べるけど、書くのが面倒なのでまとめておくタイプにした。