舘野 真

舘野 真

職種
EngineerTech Lead
Twitter

ぐるなびにてフロントエンドエンジニア、メドレーではフロントエンドからバックエンド開発を担う。現在、Progateではフロントエンドエンジニアとしてテックリードに従事。

note

Tech blog

ReactコンポーネントのテストにCypress Component Test Runnerが良さそうという話 - Progate Tech Blog

こんにちは、Progateの舘野です。 最近、スクロール位置によってUIの状態が変わるReactコンポーネントのテストをどうしようかと悩む機会がありました。 一般的にはコンポーネントのテストにはReact Testing Libraryを利用すると思いますが、jsdomがレイアウトエンジンを持たないので、要素の寸法や画面上の位置などのレイアウトに関わる情報をテストできない制限があります。 一方で、CypressのようなE2Eテストツールであればブラウザを利用してテストするので、このようなケースでも問題なくテストできますが、実行速度とメンテナンスコストに難があります。 React Testing Libraryではそもそもテストができないので、実行速度やメンテナンスコストには目を瞑ってCypressのようなE2Eテストツールでテストする以外には選択肢がないかと考えましたが、Cypressについて調べていると Cypress Component Test Runnerをv7.0.0でアルファリリースしたという記事がありました。 Cypress Component Test Runnerは、v7以前では experimentalComponentTesting フラグを有効にすることで利用できるようになっていたようですが、v7でReact Testing LibraryのようなNode.js環境でのコンポーネントのテストに置き換わるテストツールとしてアルファリリースされたようです。 このComponent Test Runnerは、以下のように今回求めている点をいずれも満たしていると思われますが、実際にReactのコンポーネントを簡易的にテストして試しみることにしました。 Component Test Runnerを試すために、 create-react-app(以下CRA)でReactアプリケーションの雛形を用意して、 create-cypress-testsでComponent Test Runnerを動かすのに必要なものを揃えます。 その上で、 コンポーネントにScrollspy(スクロール位置によってビューポート内に表示されている要素を検知して、どのナビゲーションがアクティブとなるかを示すUI)を実装して、Component Test Runnerでその振る舞いをテストしてみようと思います。 テストに使うプロジェクトをCRAで用意します。 $ npx create-react-app cypress-component-test-runner-playground --template typescript プロジェクトが用意できたらそのプロジェクトのルートディレクトリで create-cypress-testsコマンドを npxで実行します。 これによってComponent Test Runnerで必要になるnpmモジュールのインストールやプラグインの設定、 cypress.jsonにComponentテストの設定追加などを行います。 対話形式で、CRAの設定を使うかどうか、コンポーネントのテストにどのディレクトリを利用するかを聞かれるので、それぞれ返答して進めます。 $ npx create-cypress-tests --component-tests --use-npm --ignore-examples Running cypress 🌲 installation wizard for cypress-component-test-runner-playground@0.1.0 ✔ Installing cypress (npm install -D cypress) ⠋ Creating config filesIn order to ignore examples a spec file cypress/integration/spec.ts.

ReactコンポーネントのテストにCypress Component Test Runnerが良さそうという話 - Progate Tech Blog