diff --git a/src/v2/guide/testing.md b/src/v2/guide/testing.md new file mode 100644 index 000000000..cca03e0fb --- /dev/null +++ b/src/v2/guide/testing.md @@ -0,0 +1,169 @@ +--- +title: テスト +updated: 2020-11-07 +type: guide +order: 402 +--- + +## はじめに + +信頼性の高いアプリケーションを構築する時、テストは個人やチームが新機能を構築したり、コードをリファクタリングしたり、バグを修正したりする能力において重要な役割を果たすことができます。テストには多くの流派がありますが、Web アプリケーションの文脈でよく議論されるのは3つのカテゴリーです。 + +- 単体テスト +- コンポーネントテスト +- End-To-End (E2E) テスト + +このセクションは、テストのエコシステムを案内し、Vue アプリケーションやコンポーネントライブラリに適切なツールを選択するためのガイダンスを提供することを目的としています。 + +## 単体テスト + +### 導入 + +単体テストでは、コードの個々のユニットを分離してテストすることができます。単体テストの目的は、開発者が自分のコードに自信を持てるようになることです。徹底して意味のあるテストを書くことで、新しい機能が構築されたり、コードがリファクタリングされたりしても、アプリケーションが機能的で安定した状態を維持できるという自信を持つことができます。 + +Vue アプリケーションの単体テストは、他のアプリケーションのテストと大きな違いはありません。 + +### フレームワークの選定 + +単体テストのアドバイスはフレームワークに依存しないことが多いので、アプリケーションに最適な単体テストツールを評価する際に心に留めておくべき基本的なガイドラインをいくつか紹介します。 + +#### 最高のエラーレポート + +テストが失敗した場合、単体テストフレームワークが有用なエラーを提供してくれることが重要です。これはアサーションライブラリの仕事です。高品質のエラーメッセージを持つアサーションは、問題のデバッグにかかる時間を最小限に抑えるのに役立ちます。どのテストが失敗しているかを伝えるだけでなく、アサーションライブラリは、テストが失敗した理由、例えば、何が期待されているのか、何を受け取ったのかなどのコンテキストを提供します。 + +Jest などの一部の単体テストフレームワークには、アサーションライブラリが含まれています。その他、Mocha のようなものではアサーションライブラリを別途インストールする必要があります (通常は Chai)。 + +#### アクティブなコミュニティとチーム + +単体テストフレームワークの大部分はオープンソースなので、アクティブなコミュニティを持つことは、長期間にわたってテストをメンテナンスし、プロジェクトが積極的に維持されることを保証する必要があるチームにとって重要です。さらに、アクティブなコミュニティを持つことには、問題が発生したときにより多くのサポートを受けることができるという利点があります。 + +### フレームワーク + +エコシステムには多くのツールがありますが、Vue.js で使用されている一般的な単体テストツールは次の通りです。 + +#### Jest + +Jest は、シンプルさを重視した JavaScript テストフレームワークです。そのユニークな機能の1つは、アプリケーションのユニットを検証するための代替手段として提供しているテストのスナップショットを取る機能です。 + +**リソース:** + +- [Official Jest Website](https://jestjs.io) +- [Official Vue 2 CLI Plugin - Jest](https://cli.vuejs.org/core-plugins/unit-jest.html) + +#### Mocha + +Mocha は、柔軟性に重点を置いた JavaScript テストフレームワークです。この柔軟性により、スパイ（Sinon など）やアサーション（Chai など）などの他の一般的な機能を満たすために、さまざまなライブラリを選択できます。 Mocha のもう1つのユニークな機能は、Node.js に加えてブラウザでもテストを実行できることです。 + +**リソース:** + +- [Official Mocha Website](https://mochajs.org) +- [Official Vue CLI Plugin - Mocha](https://cli.vuejs.org/core-plugins/unit-mocha.html) + +## コンポーネントテスト + +### 導入 + +ほとんどの Vue コンポーネントをテストするには、それらが機能していることを完全に検証するために、それらを DOM（仮想またはリアル）にマウントする必要があります。これは、フレームワークに依存しないコンセプトです。その結果、コンポーネントテストフレームワークが作成され、ユーザーが信頼できる方法でこれを行うことができると同時に、Vuex、Vue Router、およびその他の Vue プラグインの統合など、Vue 固有の便利さが提供されます。 + +### フレームワークの選択 + +次のセクションでは、アプリケーションに最適なコンポーネントテストフレームワークを評価する際に留意すべきガイドラインを示します。 + +#### Vue エコシステムとの最適な互換性 + +最初の基準の1つが、コンポーネントテストライブラリが Vue エコシステムと可能な限り互換性を持つべきという点なのは驚くに値しません。これは包括的に思えるかもしれませんが、留意すべきいくつかの重要な関係領域には、単一ファイルコンポーネント（SFC）、Vuex、Vue Router、およびアプリケーションが依存するその他の Vue 固有のプラグインが含まれます。 + +#### 最高のエラーレポート + +テストが失敗した場合、コンポーネントテストのフレームワークが、問題のデバッグにかかる時間を最小限に抑えるのに役立つ有用なエラーログを提供することが重要です。どのテストが失敗したかを単に伝えるだけでなく、なぜテストが失敗したのか、例えば、何が期待されているのか、何を受け取ったのかなどのコンテキストを提供しなければなりません。 + +### 推奨ツール + +#### Vue Testing Library (@testing-library/vue) + +Vue Testing Library は、実装の詳細に依存せずにコンポーネントをテストすることに焦点を当てたツール群です。アクセシビリティを考慮して構築されているため、そのアプローチはリファクタリングを容易にします。 + +その指針となる原則は、テストがソフトウェアの使用方法に類似しているほど、テストの信頼性が高くなるということです。 + +**リソース:** + +- [Official Vue Testing Library Website](https://testing-library.com/docs/vue-testing-library/intro) + +#### Vue Test Utils + +Vue Test Utils は、ユーザーが Vue 固有の API へのアクセスを提供するために書かれた公式の低レベルコンポーネントテストライブラリです。Vue アプリケーションのテストを初めて行う場合は、Vue Test Utils を抽象化した Vue Testing Library を使用することをお勧めします。 + +**リソース:** + +- [Official Vue Test Utils Documentation](https://vue-test-utils.vuejs.org) +- [Vue Testing Handbook](https://lmiller1990.github.io/vue-testing-handbook/#what-is-this-guide) by Lachlan Miller +- [Cookbook: Unit Testing Vue Components](https://jp.vuejs.org/v2/cookbook/unit-testing-vue-components.html) + +## End-to-End (E2E) テスト + +### 導入 + +単体テストは開発者にある程度の信頼性を提供しますが、単体テストとコンポーネントテストは、本番環境にデプロイされたときに、アプリケーションの全体的なカバレッジを提供する能力には限界があります。結果として、 end-to-end (E2E) テストがアプリケーションの最も重要な側面、すなわちユーザーが実際にアプリケーションを使用したときに何が起こるか、をカバーしています。 + +言い換えれば、E2E テストは、アプリケーションのすべてのレイヤーを検証します。これには、フロントエンドのコードだけでなく、関連するすべてのバックエンドサービスやインフラストラクチャが含まれ、ユーザーの環境をより表すものとなります。ユーザーのアクションがアプリケーションにどのような影響を与えるかをテストすることで、E2E テストは、アプリケーションが適切に機能しているかどうかの信頼性を高める鍵となります。 + +### フレームワークの選定 + +Web 上の end-to-end (E2E) テストは、信頼性の低い (欠陥のある) テストで開発プロセスを遅らせるという否定を受けてきましたが、最新の E2E ツールは、より信頼性の高い、インタラクティブで有用なテストを作成するために躍進しました。以下のセクションでは、E2E テストフレームワークを選択する際にに留意すべきことについてのガイダンスを提供します。 + +#### クロスブラウザテスト + + end-to-end (E2E)テストの知られている主な利点の1つは、複数のブラウザにまたがってアプリケーションをテストできることです。100%クロスブラウザをカバーすることが望ましいと思われるかもしれませんが、クロスブラウザテストを一貫して実行するために必要な追加の時間とマシンパワーのために、チームのリソースに対するリターンが減少することに注意することが重要です。結果として、アプリケーションが必要とするクロスブラウザテストの量を選択する際には、このトレードオフを念頭に置くことが重要です。 + +

最近の E2E 開発ではブラウザ固有の問題を補足するために、一般的に使用されていないブラウザ（IE11 未満、古いバージョンの Safari など）のためにアプリケーションの監視とエラー報告ツール（Sentry、LogRocket など）が使用されています。

+ +#### 高速なフィードバックループ + + end-to-end (E2E) テストと開発の主な問題の1つは、テスト全体の実行に長い時間がかかることです。一般的に、これは継続的インテグレーションと継続的デリバリー（CI/CD）のパイプラインでのみ行われます。最新の E2E テストフレームワークは、並列化のような機能を追加することで、CI/CD パイプラインを以前よりも大幅に高速に実行できようにしてこの問題を解決しています。さらに、ローカルで開発する場合、テストのホットリロードを提供しながら作業中のページの単一テストを選択的に実行する機能は、開発者のワークフローと生産性を向上させるのに役立ちます。 + +#### 最高のデバッグ体験 + +開発者は従来、ターミナルウィンドウでログをスキャンしてテストで何がうまくいかなかったかを判断していましたが、最新の end-to-end (E2E) テストフレームワークでは、ブラウザ開発者ツールなど開発者がすでに使い慣れたツールを活用することができます。 + +#### ヘッドレスモードでの視認性 + + end-to-end (E2E)テストが継続的インテグレーション/継続的デリバリーのパイプラインで実行される場合、多くはヘッドレスブラウザで実行されます（つまり、ユーザーが見るためのブラウザが開かれていない）。そのため、エラーが発生した時に、最新の E2E テスティングフレームワークが第一級のサポートを提供する重要な機能は、エラーが発生した理由を把握するために、さまざまなテスト段階でのアプリケーションのスナップショットやビデオを表示する機能です。歴史的に、これらの統合を維持するのは面倒でした。 + +### 推奨ツール + +エコシステムには多くのツールがありますが、ここでは Vue.js のエコシステムで使用されている一般的な end-to-end (E2E)テストフレームワークをいくつか紹介します。 + +#### Cypress.io + +Cypress.io は、最高の開発者体験を提供しながら、開発者が信頼性の高い方法でアプリケーションをテストできるようにすることで、開発者の生産性を高めることを目的としたテストフレームワークです。 + +**リソース:** + +- [Cypress' Official Website](https://www.cypress.io) +- [Official Vue CLI Cypress Plugin](https://cli.vuejs.org/core-plugins/e2e-cypress.html) +- [Cypress Testing Library](https://github.com/testing-library/cypress-testing-library) + +#### Nightwatch.js + +Nightwatch.js は、Node.js の単体テストや統合テストだけでなく、Web アプリケーションや Web サイトのテストにも使える end-to-end のテストフレームワークです。 + +**リソース:** + +- [Nightwatch's Official Website](https://nightwatchjs.org) +- [Official Vue CLI Nightwatch Plugin](https://cli.vuejs.org/core-plugins/e2e-nightwatch.html) + +#### Puppeteer + +Puppeteer はブラウザを制御するための高レベルの API を提供する Node ライブラリで、アプリケーションをテストするために他のテストランナー (例: Jest) と連携することができます。 + +**リソース:** + +- [Puppeteer's Official Website](https://pptr.dev) + +#### TestCafe + +TestCafe は Node.js ベースの end-to-end フレームワークで、開発者が書きやすく信頼性の高いテストの作成に集中できるように、簡単なセットアップを提供することを目的としています。 + +**リソース:** + +- [TestCafe's Official Website](https://devexpress.github.io/testcafe/) diff --git a/src/v2/guide/unit-testing.md b/src/v2/guide/unit-testing.md deleted file mode 100644 index 2465ce9e7..000000000 --- a/src/v2/guide/unit-testing.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: 単体テスト -updated: 2020-04-26 -type: guide -order: 402 ---- - -> [Vue CLI](https://cli.vuejs.org/) には、[Jest](https://github.com/facebook/jest) または [Mocha](https://mochajs.org/) を使って難しい設定なしにユニットテストするための組み込みのオプションがあります。カスタムセットアップのためのより詳細なガイダンスとなる公式の [Vue Test Utils](https://vue-test-utils.vuejs.org/ja/) もあります。 - -## 単純なテスト - -テスト設計の観点から、コンポーネントのテスタビリティを向上させるためにコンポーネント内で特別な何かを行う必要はありません。単純に options をエクスポートするだけです。 - -``` html - - - -``` - -コンポーネントをテストする際には、[Vue Test Utils](https://vue-test-utils.vuejs.org/ja/) と合わせてインポートし、検証を実施します (ここでは、例として Jest スタイルの `expect` アサーションを使用しています): - -``` js -// Vue Test Utils の `shallowMount` とテスト対象のコンポーネントをインポートします。 -import { shallowMount } from '@vue/test-utils' -import MyComponent from './MyComponent.vue' - -// コンポーネントをマウントします。 -const wrapper = shallowMount(MyComponent) - -// テストランナーや検証には、どのようなライブラリを用いても構いませんが -// ここでは Jest を用いたテスト記述を行っています。 -describe('MyComponent', () => { - // コンポーネントの options を直接検証します。 - it('has a created hook', () => { - expect(typeof MyComponent.created).toBe('function') - }) - - // コンポーネントの options 内にある関数を実行し、 - // 結果を検証します。 - it('sets the correct default data', () => { - expect(typeof MyComponent.data).toBe('function') - const defaultData = MyComponent.data() - expect(defaultData.message).toBe('hello!') - }) - - // コンポーネントインスタンスをマウントして検証します。 - it('correctly sets the message when created', () => { - expect(wrapper.vm.$data.message).toBe('bye!') - }) - - // マウントされたコンポーネントインスタンスを描画して検証します。 - it('renders the correct message', () => { - expect(wrapper.text()).toBe('bye!') - }) -}) -``` - -## テストしやすいコンポーネントの記述 - -コンポーネントの描画結果は、コンポーネントの受け取るプロパティによってその大半が決定されます。実際、コンポーネントの描画結果が、単にプロパティの値によってのみ決まる場合、異なる引数を用いた関数の戻り値の検証と同じ様に、シンプルに考えることができます。例を見てみましょう。 - -``` html - - - -``` - -[Vue Test Utils](https://vue-test-utils.vuejs.org/ja/) を利用して、異なるプロパティを用いた描画結果の検証が可能です。 - -``` js -import { shallowMount } from '@vue/test-utils' -import MyComponent from './MyComponent.vue' - -// コンポーネントをマウントし描画結果を返すヘルパー関数 -function getMountedComponent(Component, propsData) { - return shallowMount(Component, { - propsData - }) -} - -describe('MyComponent', () => { - it('renders correctly with different props', () => { - expect( - getMountedComponent(MyComponent, { - msg: 'Hello' - }).text() - ).toBe('Hello') - - expect( - getMountedComponent(MyComponent, { - msg: 'Bye' - }).text() - ).toBe('Bye') - }) -}) -``` - -## 非同期な更新の検証 - -Vue は[非同期に DOM の更新を行う](reactivity.html#非同期更新キュー)ため、state の変更に対する DOM の更新に関する検証は、`Vue.nextTick()` が解決した後に行う必要があります。 - -``` js -// state の更新後、生成された HTML の検証を行う -it('updates the rendered message when wrapper.message updates', async () => { - const wrapper = shallowMount(MyComponent) - wrapper.setData({ message: 'foo' }) - - // state の更新後、DOM の更新をアサートする前に "tick" を待つ - await wrapper.vm.$nextTick() - expect(wrapper.text()).toBe('foo') -}) -``` - -Vue の単体テストに関する詳細情報については、[Vue Test Utils](https://vue-test-utils.vuejs.org/ja/) とクックブックエントリの [Vue コンポーネントの単体テスト](../cookbook/unit-testing-vue-components.html) について確認してください。