webnoob / vue-testing-handbook

A guide on testing Vue components and applications

English | 日本語

Vue Testing Handbook

Welcome to the Vue Testing Handbook!

What is this?

This is a collection of short, focused examples on how to test Vue components. It uses vue-test-utils, the official library for testing Vue components, and Jest, a modern testing framework. It covers the vue-test-utils API, as well as best practises and useful parts of the Jest API for testing Vue components, as well as a demo project with all the example code.

Style

Most sections have have a simple component or two, some tests, and the related code. Here is an example

• Setting up for TDD. This is a guide about setting up an environment for TDD.
• Component. This is the component used in the guide.
• Test. This is the test used in the guide.

Guides should be short, concise, and focused on a single concept. The relevant code should be linked in the article, and easily reproduced by the reader.

Languages

We are aiming to support Japanese and English for now.

Contributing

Development enviroment

Vuepress is used to generate the static website. Articles are written in markdown.

Guides

Clone the repo and run yarn to install the dependencies. Then run yarn dev to open the dev server.　Access it on localhost:8080.

Code Samples

There is an example project to run tests and examples used in the guides. To run it the demo app, run cd demo-app to navigate into the project, then run yarn to install the dependencies. Run yarn test:unit to execute the test suite.

Updates to existing guides

Make an issue regarding what you think can be improved, or just make a PR.

Source files for guides can be found in the src folder, written in Markdown (ending with .md). For example, to propose a change in the Setting up for TDD guide, you will need to edit src/setting-up-for-tdd.md.

Adding a new page

Make an issue explaining the benefit of the new page. You should also add any relevant code and tests in the demo-app project, so readers can easily recreate the scenario.

Vue Testing Handbook

Vueテスティングハンドブックへようこそ！

どういうガイドですか？

このガイドはVueコンポーネントをどのようにテストし、どう使用するのかを簡単な例と共に紹介します。 コンポーネントをテストする更新ライブラリーのvue-test-utilsとモダンテストフレームワークのJestを使います。 vue-test-utilsのAPIとコンポーネントのテストのベストプラクティスを紹介します。 よく使うJestのAPIも合わせて紹介します。

Most sections have have a simple component or two, some tests, and the related code. Here is an example

• TDDの開発環境の準備(英語)
• コンポーネント
• テスト

言語

英語と日本語をサポートします。

貢献

開発環境

リポジトリをローカルにクローン

• コマンド git clone [email protected]:lmiller1990/vue-testing-handbook.git

モジュールのインストール

• コマンド yarn install

実行

• コマンド yarn dev

表示

• ブラウザからアクセス localhost:8080

終了

• コマンド ctrl + c

デモ

ガイドに使うテストのデモプロジェクトもあります。

デモ環境

• コマンド cd demo-app

モジュールのインストール

• コマンド yarn install

実行

• コマンド yarn test:unit

既存のページに貢献

Issueを切って、それかPRを出します。レビューします。

新しいページを追加

課題を作って、新しいページの価値を説明してください。 demo-appプロジェクトにも書いたコードの例を追加してください。 そうすると、ガイドが説明した内容を簡単に再現できます。