1つのソースコードで Vue 2 と Vue 3 の両方の環境で動作する UI ライブラリのテスト環境構築
はじめに
現在開発しているアプリケーションで Vue 2 から Vue 3 へのバージョンアップを進めている。
この開発の中で、Vue 2 のアプリケーションで利用しているコンポーネントが Vue 3 のアプリケーションから利用した際に振る舞いが損なわれないことを担保しながら開発を進めることを目的として、1つのソースコードで Vue 2 と Vue 3 の両方の環境で動作する UI ライブラリのテスト環境の構築を行った。
今回はこのような環境の構築方法についてまとめる。
UI ライブラリのサンプルは vite で構築するが webpack や esbuild でも同様のことが実現できるはず。
リポジトリ
環境構築
UI ライブラリ
依存パッケージ
Vue のバージョン切り替え
- Vue 2 と Vue 3 の両方の環境で動作させたいので vue-demi をインストールしている。
-
vue-demiのバージョン切り替え用のスクリプトをsetup:2,setup:3で定義している。
- また、それぞれのスクリプトに
VUE_VERSIONという環境変数を与えてテスト・ビルドで処理を分岐する。
npm パッケージにエイリアスを定義
-
vueと@testing-library/vueは Vue 2 と Vue 3 でパッケージが分かれていないため npm のエイリアスを定義して、別名で異なるバージョンをインストールしている。
vue
@testing-library/vue
Vue のコンパイラ
- Vue 3 のコンパイラは vue の 3.2.13 以降はパッケージに内包されているので別途インストールする必要はない。
-
vue/compiler-sfcで参照できる。 - https://github.com/vuejs/core/tree/main/packages/compiler-sfc#vuecompiler-sfc
-
- Vue 2 のコンパイルのために
vue-template-compilerをインストールしている。
コンポーネント
シンプルなカウンターを実装する。 composition 関数は別ファイルに切り出す。
Vue コンポーネント
composition 関数
Vite
バージョン切り替え
環境変数の VUE_VERSION をもとに以下の設定を切り替える。
-
vueの参照先。
- vite 用の vue プラグイン。
ビルド設定
- ライブラリモードでビルドする。
-
vue,vue-demiはバンドルせずに利用側で解決する。
Jest
設定
環境変数の VUE_VERSION をもとに以下の設定を切り替える。
-
.vueファイルを解決するライブラリ。
-
vue,@testing-library/vueの参照先。
composition 関数のテスト
- global に定義されている jest の
expectの型が cypress とコンフリクトするので@jest/globalsからインポートする。
ノードベースのコンポーネントテスト
-
@testing-library/vueでノードベースのコンポーネントテストを実装する。
動作確認
Vue 2 と Vue 3 の両方の環境で動作することを確認する。
$ npm -w @packages/ui run test:2
$ npm -w @packages/ui run test:3
Cypress Component Testing
設定
devServer は vite で立ち上げる。
環境変数の VUE_VERSION をもとに以下の設定を切り替える。
-
cypress/vueの参照先。
ブラウザベースのコンポーネントテスト
- cypress でブラウザベースのコンポーネントテストを実装する。
-
cyにmountのコマンドを追加して型を拡張すると jest とコンフリクトするので、cypress/vueからインポートする。
動作確認
Vue 2 と Vue 3 の両方の環境で動作することを確認する。
$ npm -w @packages/ui run cy:run:2
$ npm -w @packages/ui run cy:run:3
ビルド
動作確認
Vue 2 と Vue 3 の両方の環境で動作することを確認する。
$ npm -w @packages/ui run build:2
$ npm -w @packages/ui run build:3
アプリケーション
UI ライブラリが Vue 2 と Vue 3 の両方の環境で動作することが確認できたので、あとは任意のアプリケーションから利用すれば良い。
一応 Vue 2 は Vue CLI で、 Vue 3 は Vite でアプリケーションのサンプルを作成した。
また、 Turborepo でコマンド一つで依存ライブラリがビルドされるように設定した。
Vue 2
Vue 3
Turborepo
最後に
お読みいただきありがとうございます。
改善点や不明点があればコメントお願いいたします。
Discussion