docs: update docs/ja (vuejs#900)

Author: 38elements

docs/guides/using-with-typescript.md

@@ -11,7 +11,7 @@ In this guide, we'll walk through how to setup a testing setup for a TypeScript
 First you need to create a project. If you don't have Vue CLI installed, install it globally:
 
 ```shell
-$ npm install -g @vue/cli-service-global
+$ npm install -g @vue/cli
 ```
 
 And create a project by running:

docs/ja/README.md

@@ -11,6 +11,7 @@
   * [Mocha + webpack による単一ファイルコンポーネントのテスト](guides/testing-single-file-components-with-mocha-webpack.md)
   * [Karma による単一ファイルコンポーネントのテスト](guides/testing-single-file-components-with-karma.md)
   * [非同期動作のテスト](guides/testing-async-components.md)
+  * [TypeScript と一緒に使う](guides/using-with-typescript.md)
   * [Vue Router と一緒に使う](guides/using-with-vue-router.md)
   * [Vuex と一緒に使う](guides/using-with-vuex.md)
 * [API](api/)

docs/ja/api/options.md

@@ -65,30 +65,52 @@ expect(wrapper.find('div')).toBe(true)
 
 ## scopedSlots
 
-- 型: `{ [name: string]: string }`
+- 型: `{ [name: string]: string|Function }`
 
-コンポーネントにスコープ付きスロットのコンテンツのオブジェクトを渡します。key はスロット名に対応します。値はテンプレート文字列を指定します。
+コンポーネントにスコープ付きスロットのオブジェクトを提供します。そのオブジェクトのキーはスロット名になります。
 
-3つ制限事項があります。
+slot-scope 属性を使って props を指定することができます。
 
-* [email protected]+ のみをサポートします。
+```js
+shallowMount(Component, {
+  scopedSlots: {
+    foo: '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>'
+  }
+})
+```
 
-* `<template>` タグを `scopedSlots` オプションのルート要素として使用することはできません。
+slot-scope 属性を使って props を指定しない場合、スロットが展開されると `props` という変数名で props を使用することができます。
 
-* PhantomJS をサポートしません。  
-代わりに [Puppeteer](https://github.com/karma-runner/karma-chrome-launcher#headless-chromium-with-puppeteer) を使用してください。
+```js
+shallowMount(Component, {
+  scopedSlots: {
+    default: '<p>{{props.index}},{{props.text}}</p>'
+  }
+})
+```
 
-例:
+props を引数に取る関数を渡すことができます。
 
 ```js
-const wrapper = shallowMount(Component, {
+shallowMount(Component, {
+  scopedSlots: {
+    foo: function (props) {
+      return this.$createElement('div', props.index)
+    }
+  }
+})
+```
+
+または、 JSX を使用することができます。メソッド内に JSX を書いた場合、`this.$createElement` は babel-plugin-transform-vue-jsx によって自動的に注入されます。
+
+```js
+shallowMount(Component, {
   scopedSlots: {
-    foo: '<p slot-scope="props">{{props.index}},{{props.text}}</p>'
+    foo (props) {
+      return <div>{ props.text }</div>
+    }
   }
 })
-expect(wrapper.find('#fooWrapper').html()).toBe(
-  `<div id="fooWrapper"><p>0,text1</p><p>1,text2</p><p>2,text3</p></div>`
-)
 ```
 
 ## stubs

docs/ja/guides/README.md

@@ -8,5 +8,6 @@
 !!!include(docs/ja/guides/testing-single-file-components-with-mocha-webpack.md)!!!
 !!!include(docs/ja/guides/testing-single-file-components-with-karma.md)!!!
 !!!include(docs/ja/guides/testing-async-components.md)!!!
+!!!include(docs/ja/guides/using-with-typescript.md)!!!
 !!!include(docs/ja/guides/using-with-vue-router.md)!!!
-!!!include(docs/ja/guides/using-with-vuex.md)!!!
+!!!include(docs/ja/guides/using-with-vuex.md)!!!

docs/ja/guides/testing-single-file-components-with-jest.md

@@ -47,7 +47,7 @@ npm install --save-dev vue-jest
     ],
     "transform": {
       // vue-jest で *.vue ファイルを処理する
-      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
+      ".*\\.(vue)$": "vue-jest"
     }
   }
 }
@@ -122,31 +122,6 @@ webpack で `babel-preset-env` を使用するとした場合、webpack は ES M
 }
 ```
 
-### スナップショットテスト
-
-[`vue-server-renderer`](https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer) を使ってコンポーネントを文字列に描画して保存することができます。[Jest のスナップショットテスト](https://facebook.github.io/jest/docs/en/snapshot-testing.html) のスナップショットとして表示されます。 
-
-`vue-server-renderer` の描画結果には、いくつかの SSR (Server-Side Rendering: サーバサイドレンダリング) 固有の属性が含まれており、空白を無視するため、diff をスキャンするのが難しくなります。カスタムシリアライザを使用して、保存されたスナップショットを改善することができます。
-
-``` bash
-npm install --save-dev jest-serializer-vue
-```
-
-次に `package.json` で設定します:
-
-``` json
-{
-  // ...
-  "jest": {
-    // ...
-    // スナップショットのシリアライザ
-    "snapshotSerializers": [
-      "<rootDir>/node_modules/jest-serializer-vue"
-    ]
-  }
-}
-```
-
 ### テストファイルの配置
 
 デフォルトでは、Jest はプロジェクト全体で `.spec.js` または `.test.js` 拡張子を持つすべてのファイルを再帰的に取得します。これがあなたのニーズに合わない場合は、`package.json` ファイルの config セクションで[testRegex を変更する](https://facebook.github.io/jest/docs/en/configuration.html#testregex-string)ことが可能です。
@@ -202,6 +177,38 @@ describe('Component', () => {
 })
 ```
 
+### スナップショットテスト
+
+Vue Test Utils でコンポーネントをマウントすると、コンポーネントのルート HTML 要素にアクセスすることができます。 [Jest のスナップショットテスト](https://facebook.github.io/jest/docs/en/snapshot-testing.html)で使用するためにこれを保存することができます。
+
+```js
+test('renders correctly', () => {
+  const wrapper = mount(Component)
+  expect(wrapper.element).toMatchSnapshot()
+})
+```
+
+カスタムシリアライザを使用することによって保存されたスナップショットを改善することができます。
+
+``` bash
+npm install --save-dev jest-serializer-vue
+```
+
+`package.json` でその設定をします。
+
+``` json
+{
+  // ...
+  "jest": {
+    // ...
+    // スナップショットに対するシリアライズ
+    "snapshotSerializers": [
+      "jest-serializer-vue"
+    ]
+  }
+}
+```
+
 ### リソース
 
 - [このセットアップのプロジェクト例](https://github.com/vuejs/vue-test-utils-jest-example)

docs/ja/guides/using-with-typescript.md

@@ -0,0 +1,157 @@
+## TypeScript と一緒に使う
+
+> この記事のサンプルプロジェクトは、 [GitHub](https://github.com/vuejs/vue-test-utils-typescript-example) にあります。
+
+TypeScript は JavaScript に型とクラスを加えた人気のある JavaScript のスーパーセットです。 Vue Test Utils の型定義は、配布されているVue Test Utils のパッケージに含まれています。だから、Vue Test Utils と TypeScript はうまく動作します。
+
+ここでは、基本的な Vue CLI を使った TypeScript のセットアップから Jest と Vue Test Utils を使用した TypeScript のテストの作成までを解説します。
+
+### TypeScript の追加
+
+最初にプロジェクトを作成します。もし、Vue CLI をインストールしていないなら、 Vue CLI をグローバルにインストールしてください。
+
+```shell
+$ npm install -g @vue/cli
+```
+
+以下のようにプロジェクトを作成します。
+
+```shell
+$ vue create hello-world
+```
+
+CLI プロンプトで `Manually select features` を選択します。そして、 TypeScript を選択して Enter キーを押します。これで TypeScript の設定がされているプロジェクトが生成されます。
+
+::: tip 注意
+Vue と TypeScript を一緒に使うためのセットアップの詳細は、 [TypeScript Vue starter guide](https://github.com/Microsoft/TypeScript-Vue-Starter) を確認してください。
+:::
+
+次にプロジェクトに Jest を加えます。
+
+### Jest のセットアップ
+
+Jest はバッテリー付属のユニットテストソリューションを提供するために Facebook が開発したテストランナです。 Jest の詳細については[公式ドキュメント](https://facebook.github.io/jest/) を参照してください。
+
+Jest と Vue Test Utils をインストールします。
+
+```bash
+$ npm install --save-dev jest @vue/test-utils
+```
+
+次に `test:unit` スクリプトを `package.json` に定義します。
+
+```json
+// package.json
+{
+  // ..
+  "scripts": {
+    // ..
+    "test:unit": "jest"
+  }
+  // ..
+}
+```
+
+### Jest での単一ファイルコンポーネントの処理
+
+Jest が `*.vue` ファイルを処理するために `vue-jest` プリプロセッサをインストールして設定します。
+
+``` bash
+npm install --save-dev vue-jest
+```
+
+次に `jest` ブロックを `package.json` に追加します。
+
+``` json
+{
+  // ...
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "ts",
+      "json",
+      // `*.vue` ファイルを Jest で取り扱います。
+      "vue"
+    ],
+    "transform": {
+      // `vue-jest` で　`*.vue` ファイルを処理します。
+      ".*\\.(vue)$": "vue-jest",
+    },
+    "testURL": "http://localhost/"
+  }
+}
+```
+
+### Jest に対応するための TypeScript の設定
+
+テストで TypeScript ファイルを使うために Jest が TypeScript をコンパイルするようにセットアップする必要があります。そのために `ts-jest` をインストールします。
+
+``` bash
+$ npm install --save-dev ts-jest
+```
+
+次に Jest が TypeScript のテストファイルを `ts-jest` で処理するために `package.json` の `jest.transform` に設定を追加します。
+
+``` json
+{
+  // ...
+  "jest": {
+    // ...
+    "transform": {
+      // ...
+      // `ts-jest` で `*.ts` ファイルを処理します。
+      "^.+\\.tsx?$": "ts-jest"
+    },
+    // ...
+  }
+}
+```
+
+### テストファイルの配置
+
+デフォルトでは、 Jest はプロジェクトにある拡張子が `.spec.js` もしくは `.test.js` のすべてのファイルを対象にします。
+
+拡張子が `.ts` のテストファイルを実行するために、`package.json` ファイルの `testRegex` を変更する必要があります。
+
+以下を `package.json` の `jest` フィールドに追加します。
+
+``` json
+{
+  // ...
+  "jest": {
+    // ...
+    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$"
+  }
+}
+```
+
+Jest はテストされるコードと同じディレクトリに `__tests__` ディレクトリを作成することを推奨していますが、あなたにとってテストに適したディレクトリ構造にして構いません。ただ、Jest は `__snapshots__` ディレクトリをスナップショットテストを実施するテストファイルと同じディレクトリに作成することに注意してください。
+
+### ユニットテストを書く
+
+これでプロジェクトのセットアップが完了しました。今度はユニットテストを作成します。
+
+`src/components/__tests__/HelloWorld.spec.ts` ファイルを作成して、以下のコードを加えます。
+
+```js
+// src/components/__tests__/HelloWorld.spec.ts
+import { shallowMount } from '@vue/test-utils'
+import HelloWorld from '../HelloWorld.vue'
+
+describe('HelloWorld.vue', () => {
+  test('renders props.msg when passed', () => {
+    const msg = 'new message'
+    const wrapper = shallowMount(HelloWorld, {
+      propsData: { msg }
+    })
+    expect(wrapper.text()).toMatch(msg)
+  })
+})
+```
+
+これが TypeScript と Vue Test Utils を協業させるために必要なことすべてです!
+
+### リソース
+
+- [この記事のサンプルプロジェクト](https://github.com/vuejs/vue-test-utils-typescript-example)
+- [Jest](https://facebook.github.io/jest/)