chore: merge

Author: eddyerburgh

README.md

@@ -16,7 +16,7 @@ npm install --save-dev @vue/server-test-utils
 ```
 
 ## Peer Dependencies
-You need to install `vue-template-compiler` which is used to compiled components. It should be the same version as the version of Vue you are using.
+You need to install `vue-template-compiler` which is used to compile components. It should be the same version as the version of Vue you are using.
 
 ```
 npm install --save-dev vue-template-compiler
@@ -35,7 +35,7 @@ Refer to the [documentation](https://vue-test-utils.vuejs.org/)
 
 ## Questions
 
-For questions and support please use the [Discord chat room](https://vue-land.js.org/), [Gitter chat room](https://gitter.im/vuejs/vue), or [the official forum](http://forum.vuejs.org). The issue list of this repo is **exclusively** for bug reports and feature requests.
+For questions and support please use the [Discord chat room](https://vue-land.js.org/) or [the official forum](http://forum.vuejs.org). The issue list of this repo is **exclusively** for bug reports and feature requests.
 
 ## Issues
 

docs/.vuepress/config.js

@@ -24,6 +24,10 @@ module.exports = {
   serviceWorker: true,
   theme: 'vue',
   themeConfig: {
+    algolia: {
+      apiKey: 'ee1b8516c9e5a5be9b6c25684eafc42f',
+      indexName: 'vue_test_utils'
+    },
     repo: 'vuejs/vue-test-utils',
     docsDir: 'docs',
     editLinks: true,

docs/api/options.md

@@ -9,17 +9,18 @@ Options for `mount` and `shallowMount`. The options object can contain both Vue
 - [`mocks`](#mocks)
 - [`localVue`](#localvue)
 - [`attachToDocument`](#attachtodocument)
+- [`propsData`](#propsdata)
 - [`attrs`](#attrs)
 - [`listeners`](#listeners)
-- [`parentComponent`](#parentComponent)
+- [`parentComponent`](#parentcomponent)
 - [`provide`](#provide)
 - [`sync`](#sync)
 
 ## context
 
 - type: `Object`
 
-Passes context to functional component. Can only be used with functional components.
+Passes context to functional component. Can only be used with [functional components](https://vuejs.org/v2/guide/render-function.html#Functional-Components).
 
 Example:
 
@@ -206,6 +207,32 @@ Component will be attached to DOM when rendered if set to `true`.
 
 Set the component instance's `$attrs` object.
 
+## propsData
+
+- type: `Object`
+
+Set the component instance's props. 
+
+Example:
+
+```js
+const Component = {
+  template: '<div>{{ msg }}</div>',
+  props: ['msg']
+}
+const wrapper = mount(Component, {
+  propsData: {
+    msg: 'aBC'
+  }
+})
+expect(wrapper.text()).toBe('aBC')
+```
+
+::: tip 
+It's worth noting that `propsData` is actually a [Vue API](https://vuejs.org/v2/api/#propsData), not a 
+`vue-test-utils` option. It is processed through [`extends`](#other-options).
+::: 
+
 ## listeners
 
 - type: `Object`
@@ -235,6 +262,25 @@ expect(wrapper.vm.$parent.name).toBe('foo')
 
 Pass properties for components to use in injection. See [provide/inject](https://vuejs.org/v2/api/#provide-inject).
 
+Example:
+
+```js
+const Component = {
+  inject: ['foo'],
+  template: '<div>{{this.foo()}}</div>'
+}
+
+const wrapper = shallowMount(Component, {
+  provide: {
+    foo () {
+      return 'fooValue'
+    }
+  }
+})
+
+expect(wrapper.text()).toBe('fooValue')
+```
+
 ## sync
 
 - type: `boolean`

docs/api/shallowMount.md

@@ -89,7 +89,7 @@ describe('Foo', () => {
         foo: '<div />'
       }
     })
-    expect(wrapper.find('div')).toBe(true)
+    expect(wrapper.contains('div')).toBe(true)
   })
 })
 ```

docs/guides/testing-async-components.md

@@ -8,9 +8,7 @@ The implementation of the `axios` mock looks like this:
 
 ``` js
 export default {
-  get: () => new Promise(resolve => {
-    resolve({ data: 'value' })
-  })
+  get: () => Promise.resolve({ data: 'value' })
 }
 ```
 

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-async-components.md

@@ -8,9 +8,7 @@
 
 ``` js
 export default {
-  get: () => new Promise(resolve => {
-    resolve({ data: 'value' })
-  })
+  get: () => Promise.resolve({ data: 'value' })
 }
 ```
 

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)