Nuxt.jsでjestを使ってテストを始めるZennkata📝Nuxt.jsでjestを使ってテストを始める2021/09/20に公開2021/12/29NuxtTypeScriptJesttechjestとはJestはJavaScriptの単体テストのフレームワークです。単体テスト(ユニット(Unit)テストとも言います)とは、ボタンやセレクトボックスなど個々の機能を正しく果たしているかどうかを検証するテストの事を指します。この記事はJavaScriptのテストフレームワークでよく使われているjestをNuxt.jsを使ってとりあえず試してみたものになります。toolsは選択せずにEnterで進める。TypeScriptを追加するnuxt-property-decoratorを追加する。nuxt-property-decorator@components/にVueファイルを作る。}}</script>TSでjestを記述する@test/にjestのテストを書く。中身の詳細は後述します。});});TypeScriptにjestの型について怒られるので、@types/jestをインストールします。@types/jestts.config.jsonに追記してjestの型を認知してもらいます。}最後に、@typesファイルを作り、vueファイルにTSを使うことを宣言します。}デフォルトであるファイルはいらないので削除します。実行したいファイル名で実行します。13.11s.失敗した時は、テストがなぜ失敗したのかが赤文字で表示が出ます。あるパターンよく書いているパターンを参考でやってみました。コンポーネントをいくつか作ってみました。リポジトリhttps://github.com/kawa-t/nuxt_jest_typescriptデモページhttps://kawa-t.github.io/nuxt_jest_typescript/それぞれのコンポーネントに対してテストを書いて実行していきます。その1.表記があるかないか一番基本的なやつで、ヘッダーに「Nuxt.jsでテスト」ときちんと記載されているかをテストで確認します。テストを新しく追加するときはtest/ディレクトリに新しくファイルを作成します。})})クラス名でテストしたいHTMLを取得するときは、wrapper.find('クラス名')で取得できます。header__title">Nuxt.jsでjest</div>を取得してexpect(title.text()).toBe('Nuxt.jsでjest')で文字列を確認することができます。ヘッダーの文字列がVue.jsでテストで違っている時にテストを実行すると、下のような感じでエラーになります。})テストで記述している期待していたものに対して(Expected)、実際のコンポーネント側の記述が違っている(Received)事を教えてくれます。expect(title.text()).toBe('表記名')と書けばテストできるので、まずはこれで慣れていきました。その2.ボタンを押したときに表示がされているかボタンを押した時に、期待通りに動作しているか確認するときによく使う書き方です。カウンターボタンはクリックすると数字が1増えるもので、ヘッダーにあるハンバーガーメニューはクリックするとメニューが表示されます。カウンターボタンとほとんど同じですが、ハンバーガーメニューをクリックした時にメニューが表示されるかもjestで書いてみます。})})ハンバーガーメニューでは、メニューを表示している時と非表示にしている時で、クラス名が動的に切り替わるので、クラス名が切り替わっていればメニューがきちんと表示されているとしています。クラス名があるかないかでの確認はexpect(Closecontain.exists()).toBe(ture)で確認しています。いくつかポイントです。awaitを利用しないと、うまくテストすることができないので注意が必要です。その3.セレクトボックスの単体テスト選択するやつによって動的に右のセレクトボックスが変わるやつ。})})いくつかポイントです。wrapper.find('[data-cy="select"]').text()要素を取得するのにクラス名以外からでも取得することができます。DOM更新イベントはSetTimeoutを利用する項目が選ばれていないときは詳細項目である下記のDOMがない状態です。}}</option>1つ目のセレクトボックスが選ばれない限り、2つ目のDOMが生成されないので、この時はSetTimeoutを利用してDOMが生成されてから取得するようにします。setTimeoutを使うときはdone()を明示しておかないと、setTimeout内のテストコードが実行されないので、引数にdoneを指定しておきます。findはつなげられるひとつ目のoptionを選択してしまうので、要素を取得してから、option:checkedを指定することで詳細項目のセレクトボックスを指定しています。developerバッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。