⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
vue-test-utils includes utility components you can use to stub components.
+
+[TransitionStub](./TransitionStub.md) and [TransitionGroupStub](./TransitionGroupStub.md) are used to stub `transition` and `transition-group` components by default. You can edit the stubs by editing the config.
diff --git a/docs/fr/api/components/TransitionGroupStub.md b/docs/fr/api/components/TransitionGroupStub.md
new file mode 100644
index 000000000..3bf715b8b
--- /dev/null
+++ b/docs/fr/api/components/TransitionGroupStub.md
@@ -0,0 +1,31 @@
+# TransitionGroupStub
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
A component to stub the `transition-group` wrapper component. Instead of performing transitions asynchronously, it returns the child components synchronously.
+
+This is set to stub all `transition-group` components by default in the `vue-test-utils` config. To use the built-in `transition-group` wrapper component set `config.stubs['transition-group']` to false:
+
+```js
+import VueTestUtils from 'vue-test-utils'
+
+VueTestUtils.config.stubs['transition-group'] = false
+```
+
+To reset it to stub transition components:
+
+```js
+import VueTestUtils, { TransitionGroupStub } from 'vue-test-utils'
+
+VueTestUtils.config.stubs['transition-group'] = TransitionGroupStub
+```
+
+To set it as a stub in mounting options:
+
+```js
+import { mount, TransitionGroupStub } from 'vue-test-utils'
+
+mount(Component, {
+ stubs: {
+ 'transition-group': TransitionGroupStub
+ }
+})
+```
diff --git a/docs/fr/api/components/TransitionStub.md b/docs/fr/api/components/TransitionStub.md
new file mode 100644
index 000000000..3ec0d4724
--- /dev/null
+++ b/docs/fr/api/components/TransitionStub.md
@@ -0,0 +1,30 @@
+# TransitionStub
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
A component to stub the `transition` wrapper component. Instead of performing transitions asynchronously, it returns the child component synchronously.
+
+This is set to stub all `transition` components by default in the vue-test-utils config. To use the built-in `transition` wrapper component set `config.stubs.transition` to false:
+
+```js
+import VueTestUtils from 'vue-test-utils'
+
+VueTestUtils.config.stubs.transition = false
+```
+
+To reset it to stub transition components:
+```js
+import VueTestUtils, { TransitionStub } from 'vue-test-utils'
+
+VueTestUtils.config.stubs.transition = TransitionStub
+```
+
+To set it as a stub in mounting options:
+
+```js
+import { mount, TransitionStub } from 'vue-test-utils'
+
+mount(Component, {
+ stubs: {
+ transition: TransitionStub
+ }
+})
+```
diff --git a/docs/fr/api/config.md b/docs/fr/api/config.md
new file mode 100644
index 000000000..7c7af33f1
--- /dev/null
+++ b/docs/fr/api/config.md
@@ -0,0 +1,25 @@
+# Config
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
vue-test-utils includes a config object to defined options used by vue-test-utils.
+
+## `vue-test-utils` Config Options
+
+### `stubs`
+
+- type: `Object`
+- default: `{
+ transition: TransitionStub,
+ 'transition-group': TransitionGroupStub
+}`
+
+Stubs to use in components. These are overwritten by `stubs` passed in the mounting options.
+
+When passing `stubs` as an array in the mounting options, `config.stubs` are converted to an array, and will stub components with a basic component that returns a div.
+
+Example:
+
+```js
+import VueTestUtils from 'vue-test-utils'
+
+VueTestUtils.config.stubs['my-compomnent'] = ''
+```
diff --git a/docs/fr/api/createLocalVue.md b/docs/fr/api/createLocalVue.md
new file mode 100644
index 000000000..de2a4f974
--- /dev/null
+++ b/docs/fr/api/createLocalVue.md
@@ -0,0 +1,28 @@
+# `createLocalVue()`
+
+- **Returns:**
+ - `{Component}`
+
+- **Usage:**
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
`createLocalVue` returns a Vue class for you to add components, mixins and install plugins without polluting the global Vue class.
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
See [options](options.md)
+
+- **Usage:**
+
+Returns [`Wrapper`](wrapper/README.md) of first DOM node or Vue component matching selector.
+
+Use any valid [selector](selectors.md).
+
+**Without options:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+describe('Foo', () => {
+ it('renders a div', () => {
+ const wrapper = mount(Foo)
+ expect(wrapper.contains('div')).toBe(true)
+ })
+})
+```
+
+**With Vue options:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+describe('Foo', () => {
+ it('renders a div', () => {
+ const wrapper = mount(Foo, {
+ propsData: {
+ color: 'red'
+ }
+ })
+ expect(wrapper.hasProp('color', 'red')).toBe(true)
+ })
+})
+```
+
+**Attach to DOM:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+describe('Foo', () => {
+ it('renders a div', () => {
+ const wrapper = mount(Foo, {
+ attachToDocument: true
+ })
+ expect(wrapper.contains('div')).toBe(true)
+ })
+})
+```
+**Default and named slots:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+import Bar from './Bar.vue'
+import FooBar from './FooBar.vue'
+
+describe('Foo', () => {
+ it('renders a div', () => {
+ const wrapper = mount(Foo, {
+ slots: {
+ default: [Bar, FooBar],
+ fooBar: FooBar, // Will match ``.
+ foo: ''
+ }
+ })
+ expect(wrapper.contains('div')).toBe(true)
+ })
+})
+```
+
+**Stubbing global properties:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+describe('Foo', () => {
+ it('renders a div', () => {
+ const $route = { path: 'http://www.example-path.com' }
+ const wrapper = mount(Foo, {
+ mocks: {
+ $route
+ }
+ })
+ expect(wrapper.vm.$route.path).toBe($route.path)
+ })
+})
+```
+
+**Stubbing components:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+import Bar from './Bar.vue'
+import Faz from './Faz.vue'
+
+describe('Foo', () => {
+ it('renders a div', () => {
+ const wrapper = mount(Foo, {
+ stub: {
+ Bar: '
participer à la traduction de celle-ci dès maintenant !
Options for `mount` and `shallow`. The options object can contain both `vue-test-utils` mounting options and raw Vue options.
+
+Vue options are passed to the component when a new instance is created. , e.g. `store`, `propsData`. For a full list, see the [Vue API docs](https://vuejs.org/v2/api/).
+
+## `vue-test-utils` Specific Mounting Options
+
+- [`context`](#context)
+- [`slots`](#slots)
+- [`stubs`](#stubs)
+- [`mocks`](#mocks)
+- [`localVue`](#localvue)
+- [`attachToDocument`](#attachtodocument)
+- [`attrs`](#attrs)
+- [`listeners`](#listeners)
+- [`clone`](#clone)
+
+### `context`
+
+- type: `Object`
+
+Passes context to functional component. Can only be used with functional components.
+
+Example:
+
+```js
+const wrapper = mount(Component, {
+ context: {
+ props: { show: true }
+ }
+})
+
+expect(wrapper.is(Component)).toBe(true)
+```
+
+### `slots`
+
+- type: `{ [name: string]: Array|Component|string }`
+
+Provide an object of slot contents to the component. The key corresponds to the slot name. The value can be either a component, an array of components, or a template string.
+
+Example:
+
+```js
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+import Bar from './Bar.vue'
+
+const wrapper = shallow(Component, {
+ slots: {
+ default: [Foo, Bar],
+ fooBar: Foo, // Will match ``.
+ foo: ''
+ }
+})
+expect(wrapper.find('div')).toBe(true)
+```
+
+### `stubs`
+
+- type: `{ [name: string]: Component | boolean } | Array`
+
+Stubs child components. Can be an Array of component names to stub, or an object.
+
+Example:
+
+```js
+import Foo from './Foo.vue'
+
+mount(Component, {
+ stubs: ['registered-component']
+})
+
+shallow(Component, {
+ stubs: {
+ // stub with a specific implementation
+ 'registered-component': Foo,
+ // create default stub
+ 'another-component': true
+ }
+})
+```
+
+### `mocks`
+
+- type: `Object`
+
+Add additional properties to the instance. Useful for mocking global injections.
+
+Example:
+
+```js
+import { expect } from 'chai'
+
+const $route = { path: 'http://www.example-path.com' }
+const wrapper = shallow(Component, {
+ mocks: {
+ $route
+ }
+})
+expect(wrapper.vm.$route.path).toBe($route.path)
+```
+
+### `localVue`
+
+- type: `Vue`
+
+A local copy of Vue created by [`createLocalVue`](./createLocalVue.md) to use when mounting the component. Installing plugins on this copy of `Vue` prevents polluting the original `Vue` copy.
+
+Example:
+
+```js
+import { createLocalVue, mount } from 'vue-test-utils'
+import VueRouter from 'vue-router'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const localVue = createLocalVue()
+localVue.use(VueRouter)
+
+const routes = [
+ { path: '/foo', component: Foo }
+]
+
+const router = new VueRouter({
+ routes
+})
+
+const wrapper = mount(Component, {
+ localVue,
+ router
+})
+expect(wrapper.vm.$route).toBeInstanceOf(Object)
+```
+
+### `attachToDocument`
+
+- type: `boolean`
+- default: `false`
+
+Component will be attach to DOM when rendered if set to `true`. This can be used with [`hasStyle`](wrapper/hasStyle.md) to check multi element CSS selectors.
+
+### `attrs`
+
+- type: `Object`
+
+Set the component instance's `$attrs` object.
+
+### `listeners`
+
+- type: `Object`
+
+Set the component instance's `$listeners` object.
+
+### `clone`
+
+- type: `boolean`
+- default: `true`
+
+Clones component before mounting if `true`, which avoids mutating the original component definition.
+
+`options.mocks` (`Object`): Add globals to Vue instance.
+
+`options.localVue` (`Object`): `Vue` class to use in `mount`. See [`createLocalVue`](createLocalVue.md).
diff --git a/docs/fr/api/selectors.md b/docs/fr/api/selectors.md
new file mode 100644
index 000000000..f41e6bbd2
--- /dev/null
+++ b/docs/fr/api/selectors.md
@@ -0,0 +1,54 @@
+# Selectors
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
A lot of methods take a selector as an argument. A selector can either be a CSS selector, a Vue component, or a find option object.
+
+## CSS Selectors
+
+Mount handles any valid CSS selector:
+
+- tag selectors (`div`, `foo`, `bar`)
+- class selectors (`.foo`, `.bar`)
+- attribute selectors (`[foo]`, `[foo="bar"]`)
+- id selectors (`#foo`, `#bar`)
+- pseudo selectors (`div:first-of-type`)
+
+You can also use combinators:
+
+- direct descendant combinator (`div > #bar > .foo`)
+- general descendant combinator (`div #bar .foo`)
+- adjacent sibling selector (`div + .foo`)
+- general sibling selector (`div ~ .foo`)
+
+## Vue Components
+
+Vue components are also valid selectors.
+
+`vue-test-utils` uses the `name` property to search the instance tree for matching Vue components.
+
+```js
+// Foo.vue
+
+export default {
+ name: 'FooComponent'
+}
+```
+
+```js
+import { shallow } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = shallow(Foo)
+expect(wrapper.is(Foo)).toBe(true)
+```
+
+## Find Option Object
+
+### Ref
+
+Using a find option object, `vue-test-utils` allows for selecting elements by `$ref` on wrapper components.
+
+```js
+const buttonWrapper = wrapper.find({ ref: 'myButton' });
+buttonWrapper.trigger('click');
+```
diff --git a/docs/fr/api/shallow.md b/docs/fr/api/shallow.md
new file mode 100644
index 000000000..8e213c66c
--- /dev/null
+++ b/docs/fr/api/shallow.md
@@ -0,0 +1,124 @@
+# `shallow(component {, options}])`
+
+- **Arguments:**
+
+ - `{Component} component`
+ - `{Object} options`
+ - `{boolean} attachToDocument`
+ - `{Object} context`
+ - `{Object} slots`
+ - `{Array|Component|String} default`
+ - `{Array|Component|String} named`
+ - `{Object} mocks`
+ - `{Object|Array} stubs`
+ - `{boolean} clone`
+ - `{Object} children`
+ - `{Vue} localVue`
+
+- **Returns:** `{Wrapper}`
+
+- **Options:**
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
See [options](./options.md)
+
+- **Usage:**
+
+Returns [`Wrapper`](./wrapper/README.md) of first DOM node or Vue component matching selector.
+
+Stubs all child components.
+
+Use any valid [selector](./selectors.md).
+
+**Without options:**
+
+```js
+import { shallow } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+describe('Foo', () => {
+ it('renders a div', () => {
+ const wrapper = shallow(Foo)
+ expect(wrapper.contains('div')).toBe(true)
+ })
+})
+```
+
+**With Vue options:**
+
+```js
+import { shallow } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+describe('Foo', () => {
+ it('renders a div', () => {
+ const wrapper = shallow(Foo, {
+ propsData: {
+ color: 'red'
+ }
+ })
+ expect(wrapper.hasProp('color', 'red')).toBe(true)
+ })
+})
+```
+
+**Attach to DOM:**
+
+```js
+import { shallow } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+describe('Foo', () => {
+ it('renders a div', () => {
+ const wrapper = shallow(Foo, {
+ attachToDocument: true
+ })
+ expect(wrapper.contains('div')).toBe(true)
+ })
+})
+```
+
+**Default and named slots:**
+
+```js
+import { shallow } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+import Bar from './Bar.vue'
+import FooBar from './FooBar.vue'
+
+describe('Foo', () => {
+ it('renders a div', () => {
+ const wrapper = shallow(Foo, {
+ slots: {
+ default: [Bar, FooBar],
+ fooBar: FooBar, // Will match ,
+ foo: ''
+ }
+ })
+ expect(wrapper.find('div')).toBe(true)
+ })
+})
+```
+
+**Stubbing global properties:**
+
+```js
+import { shallow } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+describe('Foo', () => {
+ it('renders a div', () => {
+ const $route = { path: 'http://www.example-path.com' }
+ const wrapper = shallow(Foo, {
+ mocks: {
+ $route
+ }
+ })
+ expect(wrapper.vm.$route.path).toBe($route.path)
+ })
+})
+```
diff --git a/docs/fr/api/wrapper-array/README.md b/docs/fr/api/wrapper-array/README.md
new file mode 100644
index 000000000..40bf4af46
--- /dev/null
+++ b/docs/fr/api/wrapper-array/README.md
@@ -0,0 +1,11 @@
+# WrapperArray
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
A `WrapperArray` is an object that contains an array of [`Wrappers`](../wrapper/README.md), and methods to test the `Wrappers`.
+
+- **Properties:**
+
+`length` `number`: the number of `Wrappers` contained in the `WrapperArray`
+
+ - **Methods:**
+
+There is a detailed list of methods in the `WrapperArray` section of the docs.
diff --git a/docs/fr/api/wrapper-array/at.md b/docs/fr/api/wrapper-array/at.md
new file mode 100644
index 000000000..a8f0b15ce
--- /dev/null
+++ b/docs/fr/api/wrapper-array/at.md
@@ -0,0 +1,21 @@
+# at(index)
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Returns `Wrapper` at `index` passed. Uses zero based numbering (i.e. first item is at index 0).
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Assert every wrapper in `WrapperArray` contains selector.
+
+Use any valid [selector](../selectors.md).
+
+- **Arguments:**
+ - `{string|Component} selector`
+
+- **Returns:** `{boolean}`
+
+- **Example:**
+
+```js
+import { shallow } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+import Bar from './Bar.vue'
+
+const wrapper = shallow(Foo)
+const divArray = wrapper.findAll('div')
+expect(divArray.contains('p')).toBe(true)
+expect(divArray.contains(Bar)).toBe(true)
+```
diff --git a/docs/fr/api/wrapper-array/destroy.md b/docs/fr/api/wrapper-array/destroy.md
new file mode 100644
index 000000000..967de944b
--- /dev/null
+++ b/docs/fr/api/wrapper-array/destroy.md
@@ -0,0 +1,17 @@
+# destroy()
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Destroys each Vue `Wrapper` in `WrapperArray`.
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = mount(Foo)
+const divArray = wrapper.findAll('div')
+expect(divArray.contains('p')).toBe(true)
+divArray.destroy()
+expect(divArray.contains('p')).toBe(false)
+```
diff --git a/docs/fr/api/wrapper-array/hasAttribute.md b/docs/fr/api/wrapper-array/hasAttribute.md
new file mode 100644
index 000000000..07389e5a3
--- /dev/null
+++ b/docs/fr/api/wrapper-array/hasAttribute.md
@@ -0,0 +1,21 @@
+# hasAttribute(attribute, value)
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Assert every `Wrapper` in `WrapperArray` DOM node has `attribute` matching `value`.
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Assert every `Wrapper` in `WrapperArray` DOM node has class containing `className`.
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Assert every `Wrapper` in `WrapperArray` `vm` has `prop` matching `value`.
+
+**Note the Wrapper must contain a Vue instance.**
+
+- **Arguments:**
+ - `{string} prop`
+ - `{any} value`
+
+- **Returns:** `{boolean}`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+import Bar from './Bar.vue'
+
+const wrapper = mount(Foo)
+const barArray = wrapper.findAll(Bar)
+expect(barArray.hasProp('bar', 10)).toBe(true)
+```
diff --git a/docs/fr/api/wrapper-array/hasStyle.md b/docs/fr/api/wrapper-array/hasStyle.md
new file mode 100644
index 000000000..2bbdcf865
--- /dev/null
+++ b/docs/fr/api/wrapper-array/hasStyle.md
@@ -0,0 +1,24 @@
+# hasStyle(style, value)
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Assert every `Wrapper` in `WrapperArray` DOM node has style matching value.
+
+Returns `true` if `Wrapper` DOM node has `style` matching `value`.
+
+**Note will only detect inline styles when running in `jsdom`.**
+- **Arguments:**
+ - `{string} style`
+ - `{string} value`
+
+- **Returns:** `{boolean}`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = mount(Foo)
+const divArray = wrapper.findAll('div')
+expect(divArray.hasStyle('color', 'red')).toBe(true)
+```
diff --git a/docs/fr/api/wrapper-array/is.md b/docs/fr/api/wrapper-array/is.md
new file mode 100644
index 000000000..56ce7abd8
--- /dev/null
+++ b/docs/fr/api/wrapper-array/is.md
@@ -0,0 +1,20 @@
+# is(selector)
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Assert every `Wrapper` in `WrapperArray` DOM node or `vm` matches [selector](../selectors.md).
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Assert every `Wrapper` in `WrapperArray` does not contain child node.
+
+- **Returns:** `{boolean}`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = mount(Foo)
+const divArray = wrapper.findAll('div')
+expect(divArray.isEmpty()).toBe(true)
+```
diff --git a/docs/fr/api/wrapper-array/isVueInstance.md b/docs/fr/api/wrapper-array/isVueInstance.md
new file mode 100644
index 000000000..b8defcf9b
--- /dev/null
+++ b/docs/fr/api/wrapper-array/isVueInstance.md
@@ -0,0 +1,18 @@
+# isVueInstance()
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Assert every `Wrapper` in `WrapperArray` is Vue instance.
+
+- **Returns:** `{boolean}`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+import Bar from './Bar.vue'
+
+const wrapper = mount(Foo)
+const barArray = wrapper.findAll(Bar)
+expect(barArray.isVueInstance()).toBe(true)
+```
diff --git a/docs/fr/api/wrapper-array/setComputed.md b/docs/fr/api/wrapper-array/setComputed.md
new file mode 100644
index 000000000..e7b57f08c
--- /dev/null
+++ b/docs/fr/api/wrapper-array/setComputed.md
@@ -0,0 +1,26 @@
+
+# setComputed(computedObjects)
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Sets `Wrapper` `vm` computed and forces update on each `Wrapper` in `WrapperArray`.
+
+**Note every `Wrapper` must contain a Vue instance.**
+**Note every Vue instance must already have the computed properties passed to `setComputed`.**
+
+- **Arguments:**
+ - `{Object} computed properties`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import Foo from './Foo.vue'
+import Bar from './Bar.vue'
+
+const wrapper = mount(Foo)
+const barArray = wrapper.findAll(Bar)
+
+barArray.setComputed({
+ computed1: 'new-computed1',
+ computed2: 'new-computed2'
+})
+```
diff --git a/docs/fr/api/wrapper-array/setData.md b/docs/fr/api/wrapper-array/setData.md
new file mode 100644
index 000000000..1611d9a33
--- /dev/null
+++ b/docs/fr/api/wrapper-array/setData.md
@@ -0,0 +1,22 @@
+# setData(data)
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Sets `Wrapper` `vm` data and forces update on each `Wrapper` in `WrapperArray`.
+
+**Note every `Wrapper` must contain a Vue instance.**
+
+- **Arguments:**
+ - `{Object} data`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+import Bar from './Bar.vue'
+
+const wrapper = mount(Foo)
+const barArray = wrapper.findAll(Bar)
+barArray.setData({ foo: 'bar' })
+expect(barArray.at(0).vm.foo).toBe('bar')
+```
diff --git a/docs/fr/api/wrapper-array/setMethods.md b/docs/fr/api/wrapper-array/setMethods.md
new file mode 100644
index 000000000..54f56402c
--- /dev/null
+++ b/docs/fr/api/wrapper-array/setMethods.md
@@ -0,0 +1,27 @@
+
+# setMethods(methods)
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Sets `Wrapper` `vm` methods and forces update on each `Wrapper` in `WrapperArray`.
+
+**Note every `Wrapper` must contain a Vue instance.**
+
+- **Arguments:**
+ - `{Object} methods`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import sinon from 'sinon'
+import Foo from './Foo.vue'
+import Bar from './Bar.vue'
+
+const wrapper = mount(Foo)
+const barArray = wrapper.findAll(Bar)
+const clickMethodStub = sinon.stub()
+
+barArray.setMethods({ clickMethod: clickMethodStub })
+barArray.at(0).trigger('click')
+expect(clickMethodStub.called).toBe(true)
+```
diff --git a/docs/fr/api/wrapper-array/setProps.md b/docs/fr/api/wrapper-array/setProps.md
new file mode 100644
index 000000000..679e8c6a5
--- /dev/null
+++ b/docs/fr/api/wrapper-array/setProps.md
@@ -0,0 +1,22 @@
+# setProps(props)
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Sets `Wrapper` `vm` props and forces update on each `Wrapper` in `WrapperArray`.
+
+**Note every `Wrapper` must contain a Vue instance.**
+
+- **Arguments:**
+ - `{Object} props`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+import Bar from './Bar.vue'
+
+const wrapper = mount(Foo)
+const barArray = wrapper.findAll(Bar)
+barArray.setProps({ foo: 'bar' })
+expect(barArray.at(0).vm.foo).toBe('bar')
+```
diff --git a/docs/fr/api/wrapper-array/trigger.md b/docs/fr/api/wrapper-array/trigger.md
new file mode 100644
index 000000000..f861326f7
--- /dev/null
+++ b/docs/fr/api/wrapper-array/trigger.md
@@ -0,0 +1,26 @@
+# trigger(eventName)
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Triggers an event on every `Wrapper` in the `WrapperArray` DOM node.
+
+**Note every `Wrapper` must contain a Vue instance.**
+
+- **Arguments:**
+ - `{string} eventName`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import sinon from 'sinon'
+import Foo from './Foo.vue'
+
+const clickHandler = sinon.stub()
+const wrapper = mount(Foo, {
+ propsData: { clickHandler }
+})
+
+const divArray = wrapper.findAll('div')
+divArray.trigger('click')
+expect(clickHandler.called).toBe(true)
+```
diff --git a/docs/fr/api/wrapper-array/update.md b/docs/fr/api/wrapper-array/update.md
new file mode 100644
index 000000000..56713f0b8
--- /dev/null
+++ b/docs/fr/api/wrapper-array/update.md
@@ -0,0 +1,20 @@
+# update()
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Force root Vue component of each `Wrapper` in `WrapperArray` to re-render.
+
+If called on a Vue component wrapper array, it will force each Vue component to re-render.
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = mount(Foo)
+const divArray = wrapper.findAll('div')
+expect(divArray.at(0).vm.bar).toBe('bar')
+divArray.at(0).vm.bar = 'new value'
+divArray.update()
+expect(divArray.at(0).vm.bar).toBe('new value')
+```
diff --git a/docs/fr/api/wrapper/README.md b/docs/fr/api/wrapper/README.md
new file mode 100644
index 000000000..1ff53cc95
--- /dev/null
+++ b/docs/fr/api/wrapper/README.md
@@ -0,0 +1,16 @@
+# `Wrapper`
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
`vue-test-utils` is a wrapper based API.
+
+A `Wrapper` is an object that contains a mounted component or vnode and methods to test the component or vnode.
+
+- **Properties:**
+
+`vm` `Component`: this is the `Vue` instance. You can access all the [instance methods and properties of a vm](https://vuejs.org/v2/api/#Instance-Properties) with `wrapper.vm`. This only exists on Vue component wrappers
+`element` `HTMLElement`: the root DOM node of the wrapper
+`options` `Object`: Object containing `vue-test-utils` options passed to `mount` or `shallow`
+`options.attachedToDom` `Boolean`: True if `attachToDom` was passed to `mount` or `shallow`
+
+- **Methods:**
+
+There is a detailed list of methods in the wrapper section of the docs.
diff --git a/docs/fr/api/wrapper/contains.md b/docs/fr/api/wrapper/contains.md
new file mode 100644
index 000000000..163d534f2
--- /dev/null
+++ b/docs/fr/api/wrapper/contains.md
@@ -0,0 +1,23 @@
+# `contains(selector)`
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Assert `Wrapper` contains an element or component matching [selector](../selectors.md).
+
+- **Arguments:**
+ - `{string|Component} selector`
+
+- **Returns:** `{boolean}`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+import Bar from './Bar.vue'
+
+const wrapper = mount(Foo)
+expect(wrapper.contains('p')).toBe(true)
+expect(wrapper.contains(Bar)).toBe(true)
+```
+
+- **See also:** [selectors](../selectors.md)
diff --git a/docs/fr/api/wrapper/destroy.md b/docs/fr/api/wrapper/destroy.md
new file mode 100644
index 000000000..2931bbd73
--- /dev/null
+++ b/docs/fr/api/wrapper/destroy.md
@@ -0,0 +1,20 @@
+# destroy()
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Return an object containing custom events emitted by the `Wrapper` `vm`.
+
+- **Returns:** `{ [name: string]: Array> }`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+
+const wrapper = mount(Component)
+
+wrapper.vm.$emit('foo')
+wrapper.vm.$emit('foo', 123)
+
+/*
+wrapper.emitted() returns the following object:
+{
+ foo: [[], [123]]
+}
+*/
+
+// assert event has been emitted
+expect(wrapper.emitted().foo).toBeTruthy()
+
+// assert event count
+expect(wrapper.emitted().foo.length).toBe(2)
+
+// assert event payload
+expect(wrapper.emitted().foo[1]).toEqual([123])
+```
+
+You can also write the above as follows:
+
+```js
+// assert event has been emitted
+expect(wrapper.emitted('foo')).toBeTruthy()
+
+// assert event count
+expect(wrapper.emitted('foo').length).toBe(2)
+
+// assert event payload
+expect(wrapper.emitted('foo')[1]).toEqual([123])
+```
diff --git a/docs/fr/api/wrapper/emittedByOrder.md b/docs/fr/api/wrapper/emittedByOrder.md
new file mode 100644
index 000000000..64623c07b
--- /dev/null
+++ b/docs/fr/api/wrapper/emittedByOrder.md
@@ -0,0 +1,28 @@
+# emittedByOrder()
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Return an Array containing custom events emitted by the `Wrapper` `vm`.
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Assert `Wrapper` or `WrapperArray` exists.
+
+Returns false if called on an empty `Wrapper` or `WrapperArray`.
+
+- **Returns:** `{boolean}`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = mount(Foo)
+expect(wrapper.exists()).toBe(true)
+expect(wrapper.find('does-not-exist').exists()).toBe(false)
+expect(wrapper.findAll('div').exists()).toBe(true)
+expect(wrapper.findAll('does-not-exist').exists()).toBe(false)
+```
diff --git a/docs/fr/api/wrapper/find.md b/docs/fr/api/wrapper/find.md
new file mode 100644
index 000000000..5b88f58eb
--- /dev/null
+++ b/docs/fr/api/wrapper/find.md
@@ -0,0 +1,27 @@
+# find(selector)
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Returns [`Wrapper`](README.md) of first DOM node or Vue component matching selector.
+
+Use any valid [selector](../selectors.md).
+
+- **Arguments:**
+ - `{string|Component} selector`
+
+- **Returns:** `{Wrapper}`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+import Bar from './Bar.vue'
+
+const wrapper = mount(Foo)
+const div = wrapper.find('div')
+expect(div.is('div')).toBe(true)
+const bar = wrapper.find(Bar)
+expect(bar.is(Bar)).toBe(true)
+```
+
+- **See also:** [Wrapper](README.md)
diff --git a/docs/fr/api/wrapper/findAll.md b/docs/fr/api/wrapper/findAll.md
new file mode 100644
index 000000000..36a0f34e4
--- /dev/null
+++ b/docs/fr/api/wrapper/findAll.md
@@ -0,0 +1,27 @@
+# findAll(selector)
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Returns a [`WrapperArray`](../wrapper-array/README.md) of [Wrappers](README.md).
+
+Use any valid [selector](../selectors.md).
+
+- **Arguments:**
+ - `{string|Component} selector`
+
+- **Returns:** `{WrapperArray}`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+import Bar from './Bar.vue'
+
+const wrapper = mount(Foo)
+const div = wrapper.findAll('div').at(0)
+expect(div.is('div')).toBe(true)
+const bar = wrapper.findAll(Bar).at(0)
+expect(bar.is(Bar)).toBe(true)
+```
+
+- **See also:** [Wrapper](README.md)
diff --git a/docs/fr/api/wrapper/hasAttribute.md b/docs/fr/api/wrapper/hasAttribute.md
new file mode 100644
index 000000000..7022e8729
--- /dev/null
+++ b/docs/fr/api/wrapper/hasAttribute.md
@@ -0,0 +1,37 @@
+# hasAttribute(attribute, value)
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Assert `Wrapper` DOM node has attribute matching value.
+
+Returns `true` if `Wrapper` DOM node contains attribute with matching value.
+
+- **Arguments:**
+ - `{string} attribute`
+ - `{string} value`
+
+- **Returns:** `{boolean}`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = mount(Foo)
+expect(wrapper.hasAttribute('id', 'foo')).toBe(true)
+```
+
+- **Alternative:**
+
+You could get the attribute from the `Wrapper.element` to have a value based assertion:
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = mount(Foo)
+expect(wrapper.element.getAttribute('id')).toBe('foo')
+```
+
+This makes for a more informative assertion error.
diff --git a/docs/fr/api/wrapper/hasClass.md b/docs/fr/api/wrapper/hasClass.md
new file mode 100644
index 000000000..e236f49d5
--- /dev/null
+++ b/docs/fr/api/wrapper/hasClass.md
@@ -0,0 +1,21 @@
+# hasClass(className)
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Assert `Wrapper` DOM node has class contains `className`.
+
+Returns `true` if `Wrapper` DOM node contains the class.
+
+- **Arguments:**
+ - `{string} className`
+
+- **Returns:** `{boolean}`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = mount(Foo)
+expect(wrapper.hasClass('bar')).toBe(true)
+```
diff --git a/docs/fr/api/wrapper/hasProp.md b/docs/fr/api/wrapper/hasProp.md
new file mode 100644
index 000000000..8cc6ac567
--- /dev/null
+++ b/docs/fr/api/wrapper/hasProp.md
@@ -0,0 +1,25 @@
+# hasProp(prop, value)
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Assert `Wrapper` `vm` has `prop` matching `value`.
+
+Returns `true` if `Wrapper` `vm` has `prop` matching `value`.
+
+
+**Note: the Wrapper must contain a Vue instance.**
+
+- **Arguments:**
+ - `{string} prop`
+ - `{any} value`
+
+- **Returns:** `{boolean}`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = mount(Foo)
+expect(wrapper.hasProp('bar', 10)).toBe(true)
+```
diff --git a/docs/fr/api/wrapper/hasStyle.md b/docs/fr/api/wrapper/hasStyle.md
new file mode 100644
index 000000000..ab150499f
--- /dev/null
+++ b/docs/fr/api/wrapper/hasStyle.md
@@ -0,0 +1,24 @@
+# hasStyle(style, value)
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Assert `Wrapper` DOM node has style matching value.
+
+Returns `true` if `Wrapper` DOM node has `style` matching `value`.
+
+**Note will only detect inline styles when running in `jsdom`.**
+
+- **Arguments:**
+ - `{string} style`
+ - `{string} value`
+
+- **Returns:** `{boolean}`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = mount(Foo)
+expect(wrapper.hasStyle('color', 'red')).toBe(true)
+```
diff --git a/docs/fr/api/wrapper/html.md b/docs/fr/api/wrapper/html.md
new file mode 100644
index 000000000..bd7416af0
--- /dev/null
+++ b/docs/fr/api/wrapper/html.md
@@ -0,0 +1,16 @@
+# html()
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Returns HTML of `Wrapper` DOM node as a string.
+
+- **Returns:** `{string}`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = mount(Foo)
+expect(wrapper.html()).toBe('
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Assert `Wrapper` DOM node or `vm` matches [selector](../selectors.md).
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Assert `Wrapper` does not contain child node.
+
+- **Returns:** `{boolean}`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = mount(Foo)
+expect(wrapper.isEmpty()).toBe(true)
+```
diff --git a/docs/fr/api/wrapper/isVueInstance.md b/docs/fr/api/wrapper/isVueInstance.md
new file mode 100644
index 000000000..49b4a7143
--- /dev/null
+++ b/docs/fr/api/wrapper/isVueInstance.md
@@ -0,0 +1,16 @@
+# isVueInstance()
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Assert `Wrapper` is Vue instance.
+
+- **Returns:** `{boolean}`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = mount(Foo)
+expect(wrapper.isVueInstance()).toBe(true)
+ ```
diff --git a/docs/fr/api/wrapper/name.md b/docs/fr/api/wrapper/name.md
new file mode 100644
index 000000000..f638b37a5
--- /dev/null
+++ b/docs/fr/api/wrapper/name.md
@@ -0,0 +1,18 @@
+# name()
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Returns component name if `Wrapper` contains a Vue instance, or the tag name of `Wrapper` DOM node if `Wrapper` does not contain a Vue instance.
+
+- **Returns:** `{string}`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = mount(Foo)
+expect(wrapper.name()).toBe('Foo')
+const p = wrapper.find('p')
+expect(p.name()).toBe('p')
+```
diff --git a/docs/fr/api/wrapper/setComputed.md b/docs/fr/api/wrapper/setComputed.md
new file mode 100644
index 000000000..a891d9510
--- /dev/null
+++ b/docs/fr/api/wrapper/setComputed.md
@@ -0,0 +1,43 @@
+# setComputed(computedProperties)
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Sets `Wrapper` `vm` computed property and forces update.
+
+**Note the Wrapper must contain a Vue instance.**
+**Note the Vue instance must already have the computed properties passed to `setComputed`.**
+
+
+- **Arguments:**
+ - `{Object} computed properties`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+
+const wrapper = mount({
+ template: '
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Sets `Wrapper` `vm` data and forces update.
+
+**Note the Wrapper must contain a Vue instance.**
+
+- **Arguments:**
+ - `{Object} data`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = mount(Foo)
+wrapper.setData({ foo: 'bar' })
+expect(wrapper.vm.foo).toBe('bar')
+```
diff --git a/docs/fr/api/wrapper/setMethods.md b/docs/fr/api/wrapper/setMethods.md
new file mode 100644
index 000000000..9559be47b
--- /dev/null
+++ b/docs/fr/api/wrapper/setMethods.md
@@ -0,0 +1,24 @@
+# setMethods(methods)
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Sets `Wrapper` `vm` methods and forces update.
+
+**Note the Wrapper must contain a Vue instance.**
+
+- **Arguments:**
+ - `{Object} methods`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import sinon from 'sinon'
+import Foo from './Foo.vue'
+
+const wrapper = mount(Foo)
+const clickMethodStub = sinon.stub()
+
+wrapper.setMethods({ clickMethod: clickMethodStub })
+wrapper.find('button').trigger('click')
+expect(clickMethodStub.called).toBe(true)
+```
diff --git a/docs/fr/api/wrapper/setProps.md b/docs/fr/api/wrapper/setProps.md
new file mode 100644
index 000000000..e3ecbdccd
--- /dev/null
+++ b/docs/fr/api/wrapper/setProps.md
@@ -0,0 +1,48 @@
+# setProps(props)
+
+- **Arguments:**
+ - `{Object} props`
+
+- **Usage:**
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Sets `Wrapper` `vm` props and forces update.
+
+**Note the Wrapper must contain a Vue instance.**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = mount(Foo)
+wrapper.setProps({ foo: 'bar' })
+expect(wrapper.vm.foo).to.equal('bar')
+```
+
+You can also pass a `propsData` object, which will initialize the Vue instance with passed values.
+
+``` js
+// Foo.vue
+export default {
+ props: {
+ foo: {
+ type: String,
+ required: true
+ }
+ }
+}
+```
+
+``` js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = mount(Foo, {
+ propsData: {
+ foo: 'bar'
+ }
+})
+
+expect(wrapper.vm.foo).to.equal('bar')
+```
diff --git a/docs/fr/api/wrapper/text.md b/docs/fr/api/wrapper/text.md
new file mode 100644
index 000000000..58ad52ec6
--- /dev/null
+++ b/docs/fr/api/wrapper/text.md
@@ -0,0 +1,16 @@
+# text()
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Returns text content of `Wrapper`.
+
+- **Returns:** `{string}`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = mount(Foo)
+expect(wrapper.text()).toBe('bar')
+```
diff --git a/docs/fr/api/wrapper/trigger.md b/docs/fr/api/wrapper/trigger.md
new file mode 100644
index 000000000..ad4798f36
--- /dev/null
+++ b/docs/fr/api/wrapper/trigger.md
@@ -0,0 +1,38 @@
+# trigger(eventName)
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Triggers an event on the `Wrapper` DOM node.
+
+`trigger` takes an optional `options` object. The properties in the `options` object are added to the Event.
+
+You can run `preventDefault` on the event by passing `preventDefault: true` in `options`.
+
+- **Arguments:**
+ - `{string} eventName`
+ - `{Object} options`
+ - `{boolean} preventDefault`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import sinon from 'sinon'
+import Foo from './Foo'
+
+const clickHandler = sinon.stub()
+const wrapper = mount(Foo, {
+ propsData: { clickHandler }
+})
+
+wrapper.trigger('click')
+
+wrapper.trigger('click', {
+ button: 0
+})
+
+wrapper.trigger('click', {
+ preventDefault: true
+})
+
+expect(clickHandler.called).toBe(true)
+```
diff --git a/docs/fr/api/wrapper/update.md b/docs/fr/api/wrapper/update.md
new file mode 100644
index 000000000..5be9aab05
--- /dev/null
+++ b/docs/fr/api/wrapper/update.md
@@ -0,0 +1,19 @@
+# update()
+
+
⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
Force root Vue component to re-render.
+
+If called on a `Wrapper` containing a `vm`, it will force the `Wrapper` `vm` to re-render.
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = mount(Foo)
+expect(wrapper.vm.bar).toBe('bar')
+wrapper.vm.bar = 'new value'
+wrapper.update()
+expect(wrapper.vm.bar).toBe('new value')
+```
diff --git a/docs/fr/guides/README.md b/docs/fr/guides/README.md
new file mode 100644
index 000000000..223989ad0
--- /dev/null
+++ b/docs/fr/guides/README.md
@@ -0,0 +1,11 @@
+# Guides
+
+* [Commencer](./getting-started.md)
+* [Astuces](./common-tips.md)
+* [La souris, le clavier et les autres évènements DOM](./dom-events.md)
+* [Choisir un lanceur de tests](./choosing-a-test-runner.md)
+* [Utiliser avec Jest](./using-with-jest.md)
+* [Tester des composants monofichiers avec Jest](./testing-SFCs-with-jest.md)
+* [Tester des composants monofichiers avec Mocha et webpack](./testing-SFCs-with-mocha-webpack.md)
+* [Utiliser avec Vue Router](./using-with-vue-router.md)
+* [Utiliser avec Vuex](./using-with-vuex.md)
diff --git a/docs/fr/guides/choosing-a-test-runner.md b/docs/fr/guides/choosing-a-test-runner.md
new file mode 100644
index 000000000..c70bdad4e
--- /dev/null
+++ b/docs/fr/guides/choosing-a-test-runner.md
@@ -0,0 +1,45 @@
+# Choisir un lanceur de tests
+
+Un lanceur de tests est un programme qui lance des tests (et oui !).
+
+Il y a un nombre conséquent de lanceurs de tests JavaScript et `vue-test-utils` fonctionne avec tous. `vue-test-utils` est agnostique en terme de lanceurs de tests.
+
+Il y a tout de même plusieurs choses à considérer afin de choisir un lanceur de tests : variété des fonctionnalités, performance et support de la précompilation des composants monofichiers. Après avoir soigneusement analysé et comparé les bibliothèques, il y a deux lanceurs de tests que nous recommandons :
+
+- [Jest](https://facebook.github.io/jest/docs/en/getting-started.html#content) est le lanceur de test le plus complet en termes de fonctionnalités. Il requiert une configuration minimale, installe JSDOM par défaut, fournit des assertions prêtes à l'utilisation et a une très bonne interface en ligne de commandes. Cependant, vous allez avoir besoin d'un préprocesseur afin d'être capable d'importer les composants monofichiers dans vos tests. On a créé le préprocesseur `vue-jest` qui peut gérer les fonctionnalités communes des composants monofichiers. Il n'a cependant pas encore autant de fonctionnalités que `vue-loader`.
+
+- [mocha-webpack](https://github.com/zinserjan/mocha-webpack) est une surcouche de webpack + Mocha avec une expérience simplifiée et un mode de surveillance. Les bénéfices de cette installation sont que l'on peut avoir le support complet des composants monofichiers via webpack + `vue-loader`. Il y a cependant plus de configurations à réaliser.
+
+## Environnement du navigateur
+
+`vue-test-utils` se fie à un environnement de navigateur. Techniquement, vous pouvez le lancer dans un vrai navigateur, mais cela n'est pas recommandé dû à la complexité de lancer de réels navigateurs sur différentes plateformes. Au lieu de cela, nous recommandons de lancer les tests sous Node.js avec un environnement virtuel de navigateur en utilisant le [JSDOM](https://github.com/tmpvar/jsdom).
+
+Le lanceur de tests Jest installe automatiquement JSDOM. Pour d'autres lanceurs de tests, il faut le faire manuellement en utilisant [jsdom-global](https://github.com/rstacruz/jsdom-global) dans la déclaration de vos tests :
+
+``` bash
+npm install --save-dev jsdom jsdom-global
+```
+---
+``` js
+// dans test setup / entry
+require('jsdom-global')()
+```
+
+## Tester des composants monofichiers
+
+Les composants Vue monofichiers nécessitent une étape de précompilation avant qu'ils soient lancés dans Node.js ou sur un navigateur. Il existe deux méthodes recommandées pour réaliser la compilation : avec un préprocesseur Jest ou directement en utilisant webpack.
+
+Le préprocesseur `vue-jest` supporte les fonctionnalités basiques des composants monofichiers. Il ne gère pas actuellement les blocs de style et les blocs personnalisés, qui sont eux uniquement supportés par `vue-loader`. Si vous utilisez ces fonctionnalités ou d'autres configurations liées à webpack, vous aurez besoin d'utiliser l'installation basée sur webpack + `vue-loader`
+
+Lisez les guides suivants pour différentes installations :
+
+- [Tester des composants monofichiers avec Jest](./testing-SFCs-with-jest.md)
+- [Tester des composants monofichiers avec Mocha + webpack](./testing-SFCs-with-mocha-webpack.md)
+
+## Ressources
+
+- [Comparaison de lanceurs de tests](https://github.com/eddyerburgh/vue-unit-test-perf-comparison)
+- [Projet exemple avec Jest](https://github.com/vuejs/vue-test-utils-jest-example)
+- [Projet exemple avec Mocha](https://github.com/vuejs/vue-test-utils-mocha-webpack-example)
+- [Projet exemple avec tape](https://github.com/eddyerburgh/vue-test-utils-tape-example)
+- [Projet exemple avec AVA](https://github.com/eddyerburgh/vue-test-utils-ava-example)
diff --git a/docs/fr/guides/common-tips.md b/docs/fr/guides/common-tips.md
new file mode 100644
index 000000000..5be769188
--- /dev/null
+++ b/docs/fr/guides/common-tips.md
@@ -0,0 +1,134 @@
+# Astuces
+
+## Savoir quoi tester
+
+Pour les composants graphiques (UI), nous ne recommandons pas une couverture complète. En effet, cela mène à trop d'attention sur les détails de l'implémentation interne des composants et pourrait produire des tests instables.
+
+A contrario, nous recommandons d'écrire des tests qui vérifient le bon fonctionnement de l'interface public de vos composants et ainsi traiter le cœur de ceux-ci telle une boîte noire. Un simple test pourrait vérifier qu'une entrée utilisateur (due à une interaction ou un changement de props) passée au composant nous donnerait le résultat attendu (cela peut être un nouveau rendu ou l'envoi d'un évènement).
+
+Par exemple, pour le composant `Counter`, qui incrémente un compteur visible de 1 à chaque fois qu'un bouton est cliqué, le scénario de test devrait simuler le clic puis s'assurer que le rendu visuel a bien été incrémenté d'un aussi. Le test se fiche de savoir comment le compteur a incrémenté la valeur, il s'occupe seulement de l'entrée et de la sortie (du résultat).
+
+Le bénéfice de cette approche est que tant que l'interface public de votre composant reste la même, vos tests passeront et ce peu importe le comportement interne de votre composant, qui pourrait changer avec le temps.
+
+Ce sujet est discuté plus en détails dans une [très bonne présentation de Matt O'Connell](http://slides.com/mattoconnell/deck#/).
+
+## Rendu superficiel
+
+Dans des tests unitaires, on souhaite s'intéresser au composant qui est en train d'être testé comme une unité isolée et ainsi éviter de s'assurer du bon comportement des composants enfants.
+
+De plus, pour les composants qui contiennent beaucoup de composants enfants, l'intégralité de l'arbre de rendu peut être énorme. Répétitivement rendre tous les composants pourrait réduire la vitesse de nos tests.
+
+`vue-test-utils` vous permets de monter un composant sans avoir à rendre ses composants enfants (en les ignorants) avec la méthode `shallow` :
+
+```js
+import { shallow } from 'vue-test-utils'
+
+const wrapper = shallow(Component) // retourne un wrapper contenant une instance de composant montée
+wrapper.vm // l'instance de Vue montée
+```
+
+## Assertion d'évènements émis
+
+Chaque wrapper monté va automatiquement enregistrer les évènements émis par l'instance de Vue en question. Vous pouvez récupérer ces évènements en utilisant la méthode `wrapper.emitted()` :
+
+``` js
+wrapper.vm.$emit('foo')
+wrapper.vm.$emit('foo', 123)
+
+/*
+`wrapper.emitted()` retourne l'objet suivant :
+{
+ foo: [[], [123]]
+}
+*/
+```
+
+Vous pouvez ensuite réaliser des assertions sur ces données :
+``` js
+import { expect } from 'chai'
+
+// asserte que l'évènement est bien émit
+expect(wrapper.emitted().foo).toBeTruthy()
+
+// asserte la taille du compteur d'évènement
+expect(wrapper.emitted().foo.length).toBe(2)
+
+// asserte le contenu lié à l'évènement
+expect(wrapper.emitted().foo[1]).toEqual([123])
+```
+
+Vous pouvez aussi récupérer un tableau des évènements dans l'ordre d'émition en appelant [`wrapper.emittedByOrder()`](../api/wrapper/emittedByOrder.md).
+
+## Manipuler l'état d'un composant
+
+Vous pouvez directement manipuler l'état d'un composant en utilisant la méthode `setData` ou `setProps` sur le wrapper :
+
+```js
+wrapper.setData({ count: 10 })
+
+wrapper.setProps({ foo: 'bar' })
+```
+
+## Simuler des props
+
+Vous pouvez passer des props au composant en utilisant l'option `propsData` de Vue :
+
+```js
+import { mount } from 'vue-test-utils'
+
+mount(Component, {
+ propsData: {
+ aProp: 'une valeur'
+ }
+})
+```
+
+Vous pouvez aussi mettre à jour les props d'un composant déjà monté avec la méthode `wrapper.setProps({})`.
+
+*Pour une liste complète des options, veuillez regarder [la section sur les options de montage](../api/options.md) de la documentation.*
+
+## Appliquer des plugins globaux et des mixins
+
+Des composants pourraient se fier à des fonctionnalités injectées par un plugin global ou un mixin, par exemple `vuex` ou `vue-router`.
+
+Si vous écrivez des tests pour des composants dans une application spécifique, vous pouvez mettre en place les mêmes plugins globaux et mixins en une seule fois dans vos tests. Dans certains cas, comme tester un composant générique utilisé par des applications différentes, il est favorable de tester ces composants dans une installation plus isolée, sans avoir à polluer le constructeur global `Vue`. On peut utiliser la méthode [`createLocalVue`](../api/createLocalVue.md) pour faire cela :
+
+``` js
+import createLocalVue from 'vue-test-utils'
+
+// créer un constructeur local de `Vue`
+const localVue = createLocalVue()
+
+// installer des plugins comme d'habitude
+localVue.use(MyPlugin)
+
+// passe la `localVue` aux options de montage
+mount(Component, {
+ localVue
+})
+```
+
+## Simuler des injections
+
+Une stratégie alternative pour injecter des propriétés est de simplement les simuler. Vous pouvez faire cela avec l'option `mocks` :
+
+```js
+import { mount } from 'vue-test-utils'
+
+const $route = {
+ path: '/',
+ hash: '',
+ params: { id: '123' },
+ query: { q: 'bonjour' }
+}
+
+mount(Component, {
+ mocks: {
+ $route // ajoute l'objet `$route` simulé à l'instance de Vue avant de monter le composant
+ }
+})
+```
+
+## Gérer le routage
+
+Depuis que le routage, par définition, porte sur la structure générale de l'application et implique plusieurs composants. Il est mieux testé via des tests d'intégration ou point à point (end-to-end). Pour des composants individuels qui se fie aux fonctionnalités de `vue-router`, vous pouvez les simuler en utilisant les techniques mentionnées plus haut.
diff --git a/docs/fr/guides/dom-events.md b/docs/fr/guides/dom-events.md
new file mode 100644
index 000000000..98177c478
--- /dev/null
+++ b/docs/fr/guides/dom-events.md
@@ -0,0 +1,197 @@
+# Tester le clavier, la souris et les autres évènements DOM
+
+## Déclencheur d'évènements
+
+
+Le `Wrapper` expose une méthode `trigger`. Elle peut être utilisée pour déclencher des évènements du DOM.
+
+```js
+const wrapper = mount(MyButton)
+
+wrapper.trigger('click')
+```
+
+Vous devez être au courant que la méthode `find` retourne aussi un wrapper. En partant du principe que `MyComponent` contient un bouton, le code suivant clique sur le bouton.
+
+```js
+const wrapper = mount(MyComponent)
+
+wrapper.find('button').trigger('click')
+```
+
+## Options
+
+La méthode `trigger` prend en paramètre optionnel l'objet `options`. Les propriétés de l'objet `options` sont ajoutées à l'évènement.
+
+Vous pouvez utiliser `preventDefault` sur l'évènement en passant `preventDefault: true` dans le paramètre `options`.
+
+```js
+const wrapper = mount(MyButton)
+
+wrapper.trigger('click', { preventDefault: true })
+```
+
+
+## Exemple de clic de souris
+
+**Composant à tester**
+
+```html
+
+
+
+
+
+
+
+
+```
+
+**Test**
+
+```js
+import YesNoComponent from '@/components/YesNoComponent'
+import { mount } from 'vue-test-utils'
+import sinon from 'sinon'
+
+describe('Évènement click', () => {
+ it('Cliquer sur le bouton oui appelle notre méthode avec l\'argument "oui"', () => {
+ const spy = sinon.spy()
+ const wrapper = mount(YesNoComponent, {
+ propsData: {
+ callMe: spy
+ }
+ })
+ wrapper.find('button.yes').trigger('click')
+
+ spy.should.have.been.calledWith('oui')
+ })
+})
+```
+
+## Exemple de test clavier
+
+**Composant à tester**
+
+Ce composant permet d'incrémenter / décrémenter la quantité en utilisant différentes touches.
+
+```html
+
+
+
+
+
+```
+
+**Test**
+
+```js
+import QuantityComponent from '@/components/QuantityComponent'
+import { mount } from 'vue-test-utils'
+
+describe('Tests événement clavier', () => {
+ it('La quantité est zéro par défaut', () => {
+ const wrapper = mount(QuantityComponent)
+ expect(wrapper.vm.quantity).to.equal(0)
+ })
+
+ it('La flèche du haut positionne la quantité à 1', () => {
+ const wrapper = mount(QuantityComponent)
+ wrapper.trigger('keydown.up')
+ expect(wrapper.vm.quantity).to.equal(1)
+ })
+
+ it('La flèche du bas réduit la quantité de 1', () => {
+ const wrapper = mount(QuantityComponent)
+ wrapper.vm.quantity = 5
+ wrapper.trigger('keydown.down')
+ expect(wrapper.vm.quantity).to.equal(4)
+ })
+
+ it('La touche Échap positionne la quantité à 0', () => {
+ const wrapper = mount(QuantityComponent)
+ wrapper.vm.quantity = 5
+ wrapper.trigger('keydown.esc')
+ expect(wrapper.vm.quantity).to.equal(0)
+ })
+
+ it('Le caractère magique "a" positionne la quantité à 13', () => {
+ const wrapper = mount(QuantityComponent)
+ wrapper.trigger('keydown', {
+ which: 65
+ })
+ expect(wrapper.vm.quantity).to.equal(13)
+ })
+})
+
+```
+
+**Limitations**
+
+Un nom de touche après le point `keydown.up` est traduit vers un `keyCode`. Cela est supporté pour les noms suivant :
+
+* `enter`, `tab`, `delete`, `esc`, `space`, `up`, `down`, `left`, `right`
+
+## Important
+
+`vue-test-utils` déclenche les évènements de façon synchrone. Par conséquent, `vue.nextTick` n'est pas requis.
diff --git a/docs/fr/guides/getting-started.md b/docs/fr/guides/getting-started.md
new file mode 100644
index 000000000..c007c84f8
--- /dev/null
+++ b/docs/fr/guides/getting-started.md
@@ -0,0 +1,116 @@
+# Pour commencer
+
+## Installation
+
+Pour avoir un rapide avant-gout de `vue-test-utils`, clonez notre répertoire de démonstration avec l'installation de base puis installez les dépendances :
+
+``` bash
+git clone https://github.com/vuejs/vue-test-utils-getting-started
+cd vue-test-utils-getting-started
+npm install
+```
+
+Vous allez voir que le projet possède un simple composant, `counter.js` :
+
+```js
+// counter.js
+
+export default {
+ template: `
+
+ {{ count }}
+
+
+ `,
+
+ data () {
+ return {
+ count: 0
+ }
+ },
+
+ methods: {
+ increment () {
+ this.count++
+ }
+ }
+}
+```
+
+### Montages de composants
+
+`vue-test-utils` teste les composants Vue en les isolants puis en les montant, il simule les entrées nécessaires (props, injections et évènements utilisateur) et asserte les sorties (le rendu, les évènements émis).
+
+Les composants montés sont retournés dans un [Wrapper](./api/wrapper.md), qui expose de nombreuses méthodes pour manipuler, traverser et interroger l'instance du composant Vue en question.
+
+Vous pouvez créer des wrappers en utilisant la méthode `mount`. Créons un fichier nommé `test.js` :
+
+```js
+// test.js
+
+// Importe la méthode `mount()` depuis test utils
+// et le composant qu'on souhaite tester
+import { mount } from 'vue-test-utils'
+import Counter from './counter'
+
+// On monte le composant et nous voilà avec un wrapper
+const wrapper = mount(Counter)
+
+// On accède à l'instance actuelle de Vue via `wrapper.vm`
+const vm = wrapper.vm
+
+// Pour inspecter le wrapper en profondeur, utilisez console
+// puis votre aventure avec vue-test-utils commence !
+console.log(wrapper)
+```
+
+### Tester le contenu du rendu HTML d'un composant
+
+Nous avons maintenant un wrapper, la première chose que l'on peut faire, c'est de vérifier que le contenu du rendu HTML du composant correspond à celui attendu.
+
+```js
+import { mount } from 'vue-test-utils'
+import Counter from './counter'
+
+describe('Counter', () => {
+ // On monte le composant et nous voilà avec un wrapper
+ const wrapper = mount(Counter)
+
+ it('fait le rendu correctement', () => {
+ expect(wrapper.html()).toContain('0')
+ })
+
+ // c'est aussi très simple de vérifier qu'un élément existe
+ it('a un bouton', () => {
+ expect(wrapper.contains('button')).toBe(true)
+ })
+})
+```
+
+On peut maintenant lancer les tests avec `npm test`. Vous devriez voir les tests se lancer et réussir.
+
+### Simulation de l'interaction utilisateur
+
+Notre compteur devrait s'incrémenter quand l'utilisateur clique sur le bouton. Pour simuler ce comportement, on doit tout d'abord localiser le bouton avec `wrapper.find()`, qui retourne un **wrapper pour l'élément bouton**. On peut ensuite simuler un clic en appelant `.trigger()` sur le wrapper du bouton :
+
+```js
+it('le clic sur le bouton devrait incrémenter le compteur', () => {
+ expect(wrapper.vm.count).toBe(0)
+ const button = wrapper.find('button')
+ button.trigger('click')
+ expect(wrapper.vm.count).toBe(1)
+})
+```
+
+### Et quid de `nextTick` ?
+
+Vue groupe les mises à jour du DOM en attentes puis les appliquent de façon asynchrone pour prévenir d'éventuels multiples rendus causés par de multiples mutations de données. C'est pourquoi en pratique, on a souvent à utiliser `Vue.nextTick` pour attendre que Vue modifie le DOM actuel après avoir lancé quelques changements d'état.
+
+Pour simplifier cela, `vue-test-utils` applique toutes les mises à jour de façon synchrone afin que vous n'ayez pas besoin d'utiliser `Vue.nextTick` pour attendre des mises à jour du DOM dans vos tests.
+
+*Note : `nextTick` est toujours nécessaire quand vous souhaitez explicitement faire avancer la boucle des évènements, pour des opérations telles que des fonctions de rappel ou des résolutions de promesses.*
+
+## Et après ?
+
+- Intégrez `vue-test-utils` dans votre projet en [choisissant votre lanceur de tests](./choosing-a-test-runner.md)
+- En apprendre plus sur les [techniques et astuces pour écrire des tests](./common-tips.md)
diff --git a/docs/fr/guides/testing-SFCs-with-jest.md b/docs/fr/guides/testing-SFCs-with-jest.md
new file mode 100644
index 000000000..02fd660d6
--- /dev/null
+++ b/docs/fr/guides/testing-SFCs-with-jest.md
@@ -0,0 +1,179 @@
+# Tester des composants monofichiers avec Jest
+
+> Un exemple de projet pour cette installation est disponible sur [GitHub](https://github.com/vuejs/vue-test-utils-jest-example).
+
+Jest est un lanceur de tests développé par Facebook. Il a pour but de procurer une solution complète de tests unitaires. Vous pouvez en apprendre plus sur Jest sur [sa documentation officielle](https://facebook.github.io/jest/).
+
+## Installer Jest
+
+On va supposer que vous commencez avec une installation qui a déjà webpack, vue-loader et Babel correctement configurés (ex. le template `webpack-simple` via `vue-cli`).
+
+La première chose à faire est d'installer Jest et `vue-test-utils` :
+
+```bash
+$ npm install --save-dev jest vue-test-utils
+```
+
+Ensuite, on doit définir un script dans notre `package.json`.
+
+```json
+// package.json
+{
+ "scripts": {
+ "test": "jest"
+ }
+}
+```
+
+## Traiter les composants monofichiers dans Jest
+
+Pour indiquer à Jest comment traiter les fichiers `*.vue`, on va avoir besoin d'installer et de configurer le préprocesseur `vue-jest` :
+
+``` bash
+npm install --save-dev vue-jest
+```
+
+Ensuite, créez un objet `jest` dans `package.json` :
+
+``` json
+{
+ // ...
+ "jest": {
+ "moduleFileExtensions": [
+ "js",
+ "json",
+ // indique à Jest de gérer les fichiers `*.vue`
+ "vue"
+ ],
+ "transform": {
+ // traite les fichiers `*.vue` avec `vue-jest`
+ ".*\\.(vue)$": "/node_modules/vue-jest"
+ },
+ "mapCoverage": true
+ }
+}
+```
+
+> **Note :** `vue-jest` ne supporte actuellement pas toutes les fonctionnalités de `vue-loader`, par exemple le support des blocs personnalisés et du chargement de styles. De plus, quelques fonctionnalités spécifiques à webpack comme la scission de code ne sont pas supportées. Pour les utiliser, lisez le guide sur [tester des composants monofichiers avec Mocha et webpack](./testing-SFCs-with-mocha-webpack.md).
+
+## Gérer les alias webpack
+
+Si vous utilisez un alias de résolution dans la configuration de webpack, c.-à-d. faire un alias `@` pour `/src`, vous devez aussi ajouter une configuration pour Jest en utilisant l'option `moduleNameMapper` :
+
+``` json
+{
+ // ...
+ "jest": {
+ // ...
+ // supporte la même concordonance d'alias @ -> src dans le code source
+ "moduleNameMapper": {
+ "^@/(.*)$": "/src/$1"
+ }
+ }
+}
+```
+
+## Configurer Babel pour Jest
+
+
+Même si les dernières version de Node.js supportent la plupart des fonctionnalités ES2015, vous souhaitez quand même utiliser la syntaxe des modules ES ainsi que les fonctionnalités `stage-x` dans vos tests. Pour cela, on doit installer `babel-jest` :
+
+``` bash
+npm install --save-dev babel-jest
+```
+
+Ensuite, on doit indiquer à Jest de gérer les fichiers de tests JavaScript avec `babel-jest` en ajoutant une entrée sous `jest.transform` dans `package.json` :
+
+``` json
+{
+ // ...
+ "jest": {
+ // ...
+ "transform": {
+ // ...
+ // gérer le JavaScript avec `babel-jest`
+ "^.+\\.js$": "/node_modules/babel-jest"
+ },
+ // ...
+ }
+}
+```
+
+> Par défaut, `babel-jest` va automatiquement s'autoconfigurer dès l'installation. Cependant, comme nous avons explicitement ajouté une transformation pour les fichiers `*.vue`, on se doit aussi d'explicitement configurer `babel-jest`.
+
+En supposant que vous utilisez `babel-preset-env` avec webpack, la configuration par défaut de Babel désactive la transpilation des modules ES car webpack sait déjà comment traiter ces modules. Nous devons, cependant, l'activer pour nos tests car, Jest fonctionne directement dans Node.js.
+
+On doit aussi indiquer à `babel-preset-env` d'utiliser la version de Node.js que nous utilisons. Cela empêchera de transpiler inutilement des fonctionnalités et lancera nos tests plus rapidement.
+
+Pour appliquer ces options uniquement aux tests, mettez-les dans un fichier de configuration différent sous `env.test` (cela va être automatiquement être utilisé par `babel-jest`).
+
+Exemple `.babelrc`:
+
+``` json
+{
+ "presets": [
+ ["env", { "modules": false }]
+ ],
+ "env": {
+ "test": {
+ "presets": [
+ ["env", { "targets": { "node": "current" }}]
+ ]
+ }
+ }
+}
+```
+
+### Test d'instantanés
+
+Vous pouvez utiliser [`vue-server-renderer`](https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer) pour transformer un composant en une chaine de caractères afin de le sauvegarder dans un instantané pour [Jest tests d'instantanés](https://facebook.github.io/jest/docs/en/snapshot-testing.html).
+
+Le résultat du rendu de `vue-server-renderer` inclut quelques attributs spécifiques au rendu côté serveur. Il ignore les espaces, cela rend plus dur d'analyser une différence. On peut améliorer l'instantané sauvegardé avec un sérialiseur personnalisé :
+
+``` bash
+npm install --save-dev jest-serializer-vue
+```
+
+Puis configurez-le dans `package.json`:
+
+``` json
+{
+ // ...
+ "jest": {
+ // ...
+ // sérialiseur pour les instantanés
+ "snapshotSerializers": [
+ "/node_modules/jest-serializer-vue"
+ ]
+ }
+}
+```
+
+### Placer les fichiers de tests
+
+Par défaut, Jest va récursivement récupérer tous les fichiers qui ont une extension en `.spec.js` ou `.test.js` dans le projet. Si cela ne correspond pas à vos besoins, il est possible [de changer l'expression régulière `testRegex`](https://facebook.github.io/jest/docs/en/configuration.html#testregex-string) dans la configuration se trouvant dans `package.json`.
+
+Jest recommande de créer un répertoire `__tests__` au même niveau que le code testé, mais soyez libre de structurer vos tests selon vos besoins. Soyez juste au courant que Jest créera un répertoire `__snapshots__` au même niveau que les fichiers de tests qui travaillent sur des instantanés.
+
+### Exemple d'une spécification
+
+Si vous êtes habitué à Jasmine, vous devriez très bien vous en sortir avec [l'API d'assertions de Jest](https://facebook.github.io/jest/docs/en/expect.html#content) :
+
+```js
+import { mount } from 'vue-test-utils'
+import Component from './component'
+
+describe('Component', () => {
+ test('est une instance de Vue', () => {
+ const wrapper = mount(Component)
+ expect(wrapper.isVueInstance()).toBeTruthy()
+ })
+})
+```
+
+### Ressources
+
+- [Projet exemple pour cette installation](https://github.com/vuejs/vue-test-utils-jest-example)
+- [Exemples et diapositives depuis la Vue Conf 2017](https://github.com/codebryo/vue-testing-with-jest-conf17)
+- [Jest](https://facebook.github.io/jest/)
+- [Babel preset env](https://github.com/babel/babel-preset-env)
diff --git a/docs/fr/guides/testing-SFCs-with-mocha-webpack.md b/docs/fr/guides/testing-SFCs-with-mocha-webpack.md
new file mode 100644
index 000000000..f04110d9d
--- /dev/null
+++ b/docs/fr/guides/testing-SFCs-with-mocha-webpack.md
@@ -0,0 +1,180 @@
+# Tester des composants monofichiers avec Mocha + webpack
+
+> Un exemple de projet pour cette installation est disponible sur [GitHub](https://github.com/vuejs/vue-test-utils-mocha-webpack-example).
+
+Une des stratégies pour tester des composants monofichiers est de compiler tous nos tests via webpack puis de les passer dans un lanceur de tests. L'avantage de cette approche est qu'elle procure un support complet pour les fonctionnalités de webpack et de `vue-loader`, et ce, afin de ne pas réaliser de compromis dans notre code.
+
+Techniquement, vous pouvez utiliser n'importe quel lanceur de tests et relier le tout manuellement. Cependant, nous avons trouvé [`mocha-webpack`](https://github.com/zinserjan/mocha-webpack) qui procure une expérience très simplifiée pour cette tâche particulière.
+
+## Mettre en place `mocha-webpack`
+
+On va supposer que vous commencez avec une installation qui a déjà webpack, vue-loader et Babel correctement configurés (cf. le template `webpack-simple` via `vue-cli`).
+
+La première chose à faire est d'installer les dépendances de tests :
+
+``` bash
+npm install --save-dev vue-test-utils mocha mocha-webpack
+```
+
+Ensuite, on doit définir un script test dans notre `package.json`.
+
+```json
+// package.json
+{
+ "scripts": {
+ "test": "mocha-webpack --webpack-config webpack.config.js --require test/setup.js test/**/*.spec.js"
+ }
+}
+```
+
+Quelques éléments importants à noter :
+
+- Le paramètre `--webpack-config` indique le fichier de configuration webpack à utiliser pour les tests. Dans la plupart des cas, c'est identique à la configuration du projet actuel avec une petite modification. On en reparlera plus tard.
+
+- Le paramètre `--require` permet de s'assurer que le fichier `test/setup.js` est bien exécuté avant les tests. Dans celui-ci, on met en place l'environnement où nos tests vont être exécutés.
+
+- Le dernier paramètre est un glob pour indiquer les fichiers de tests à inclure dans le paquetage.
+
+### Configuration supplémentaire pour webpack
+
+#### Externaliser les dépendances npm
+
+Dans nos tests, nous allons surement importer un nombre conséquent de dépendances npm, certaines d'entre elles n'ont pas été conçues pour une utilisation dans un navigateur et ne peuvent être empaquetées par webpack. Il faut aussi considérer qu'externaliser les dépendances augmente énormément la vitesse de lancement des tests. On peut externaliser toutes les dépendances npm avec `webpack-node-externals` :
+
+```js
+// webpack.config.js
+const nodeExternals = require('webpack-node-externals')
+
+module.exports = {
+ // ...
+ externals: [nodeExternals()]
+}
+```
+
+#### Coordinateur de sources
+
+La coordinateur de sources (« Source maps ») doit être indiquée pour être utilisé par `mocha-webpack`. La configuration recommandée est la suivante :
+
+``` js
+module.exports = {
+ // ...
+ devtool: 'inline-cheap-module-source-map'
+}
+```
+
+Si vous déboguez via votre IDE, il est recommandé d'ajouter la configuration suivante :
+
+``` js
+module.exports = {
+ // ...
+ output: {
+ // ...
+ // utiliser des chemins absolus (c'est important si vous déboguez avec un IDE)
+ devtoolModuleFilenameTemplate: '[absolute-resource-path]',
+ devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
+ }
+}
+```
+
+### Mettre en place l'environnement du navigateur
+
+`vue-test-utils` requiert en environnement de navigateur pour fonctionner. On peut le simuler avec Node.js en utilisant `jsdom-global` :
+
+```bash
+npm install --save-dev jsdom jsdom-global
+```
+
+Puis dans `test/setup.js`:
+
+``` js
+require('jsdom-global')()
+```
+
+Cela ajoute un environnement de navigateur dans Node.js afin que `vue-test-utils` fonctionne correctement.
+
+### Choisir une bibliothèque d'assertions
+
+[Chai](http://chaijs.com/) est une bibliothèque populaire qui est généralement utilisée avec Mocha. Vous pouvez aussi jeter un coup d'œil à [Sinon](http://sinonjs.org/) pour créer des espions et des fonctions avec un comportement pré-programmé (« stubs »).
+
+Vous pouvez utiliser, alternativement, `expect` qui fait maintenant partie de Jest et expose [la même API](http://facebook.github.io/jest/docs/en/expect.html#content) dans la documentation de Jest.
+
+On va utiliser `expect` et le rendre globalement accessible afin de ne pas avoir à l'importer pour chaque test :
+
+``` bash
+npm install --save-dev expect
+```
+
+Puis dans `test/setup.js`:
+
+``` js
+require('jsdom-global')()
+
+global.expect = require('expect')
+```
+
+### Optimiser Babel pour les tests
+
+Notez que nous utilisons `babel-loader` pour gérer JavaScript. Vous devriez déjà avoir Babel de configuré si vous l'utilisez dans votre application via un fichier `.babelrc`. Ici `babel-loader` va automatiquement utiliser le même fichier de configuration.
+
+Une autre chose à noter est que si vous utilisez une version de Node.js 6+, qui supporte déjà une majorité des fonctionnalités d'ES2015, vous pouvez configurer séparément un autre Babel [env option](https://babeljs.io/docs/usage/babelrc/#env-option) qui va uniquement transpiler les fonctionnalités non supportées dans la version de Node.js que vous utilisez (c.-à-d. `stage-2` ou le support de la syntaxe flow, etc.).
+
+### Ajouter un test
+
+Créez dans le dossier `src` un fichier nommé `Counter.vue`:
+
+``` html
+
+
+ {{ counter }}
+
+
+
+
+
+```
+
+Puis créez un test nommé `test/Counter.spec.js` avec le code suivant :
+
+```js
+import { shallow } from 'vue-test-utils'
+import Counter from '../src/Counter.vue'
+
+describe('Counter.vue', () => {
+ it('incrémente le compteur quand le bouton est cliqué', () => {
+ const wrapper = shallow(Counter)
+ wrapper.find('button').trigger('click')
+ expect(wrapper.find('div').text()).toMatch('1')
+ })
+})
+```
+
+Et maintenant on peut lancer le test avec :
+
+```
+npm run unit
+```
+
+Woohoo, nos tests fonctionnent !
+
+### Ressources
+
+- [Projet exemple pour cette installation](https://github.com/vuejs/vue-test-utils-mocha-webpack-example)
+- [Mocha](https://mochajs.org/)
+- [mocha-webpack](http://zinserjan.github.io/mocha-webpack/)
+- [Chai](http://chaijs.com/)
+- [Sinon](http://sinonjs.org/)
+- [jest/expect](http://facebook.github.io/jest/docs/en/expect.html#content)
diff --git a/docs/fr/guides/using-with-vue-router.md b/docs/fr/guides/using-with-vue-router.md
new file mode 100644
index 000000000..d52e812e6
--- /dev/null
+++ b/docs/fr/guides/using-with-vue-router.md
@@ -0,0 +1,71 @@
+# Utilisation avec Vue Router
+
+## Installer Vue Router pour nos tests
+
+Vous ne devez jamais installer Vue Router sur le constructeur de base de Vue pour vos tests. Installer Vue Router de cette manière ajoute `$route` et `$router` en tant que propriétés en lecture seule sur le prototype Vue.
+
+Pour éviter cela, on peut utiliser une `localVue`, et installer Vue Router dessus.
+
+```js
+import VueRouter from 'vue-router'
+const localVue = createLocalVue()
+
+localVue.use(VueRouter)
+
+shallow(Component, {
+ localVue
+})
+```
+
+## Tester des composants qui utilisent `router-link` ou `router-view`
+
+Quand vous installez Vue Router, les composants `router-link` et `router-view` sont enregistrés. Cela veut dire que l'on peut les utiliser n'importe où dans notre application sans avoir besoin de les importer.
+
+On doit donc rendre ces composants Vue Router disponibles au composant que nous testons. Il y a deux méthodes pour cela.
+
+### Utiliser des stubs
+
+```js
+shallow(Component, {
+ stubs: ['router-link', 'router-view']
+})
+```
+
+### Installer Vue Router et `localVue`
+
+```js
+import VueRouter from 'vue-router'
+const localVue = createLocalVue()
+
+localVue.use(VueRouter)
+
+shallow(Component, {
+ localVue
+})
+```
+
+## Simuler `$route` et `$router`
+
+Quelques fois, vous souhaitez tester qu'un composant réagisse correctement avec les paramètres des objets `$route` et `$router`. Pour cela, vous pouvez passer des imitations à l'instance de Vue.
+
+```js
+const $route = {
+ path: '/un/super/chemin'
+}
+
+const wrapper = shallow(Component, {
+ mocks: {
+ $route
+ }
+})
+
+wrapper.vm.$route.path // `'/un/super/chemin'`
+```
+
+## Trucs et astuces
+
+Installer Vue Router ajoute `$route` et `$router` en tant que propriétés en lecture seule au prototype de Vue.
+
+Cela veut dire que n'importe quel futur test qui va essayer de modifier `$route` ou `$router` va échouer.
+
+Pour éviter cela, n'installez jamais Vue Router quand vous lancez vos tests.
diff --git a/docs/fr/guides/using-with-vuex.md b/docs/fr/guides/using-with-vuex.md
new file mode 100644
index 000000000..717be1873
--- /dev/null
+++ b/docs/fr/guides/using-with-vuex.md
@@ -0,0 +1,266 @@
+# Utiliser avec Vuex
+
+Dans ce guide, nous allons voir comment tester Vuex dans des composants grâce à `vue-test-utils`.
+
+## Simuler des actions
+
+Regardons un peu de code !
+
+Ci-dessous, le composant que nous voulons tester. Il fait appel à des actions Vuex.
+
+``` html
+
+
+
+
+
+
+
+
+```
+
+Pour les objectifs de ce test, on se fiche de ce que les actions font, ou à ce quoi le store ressemble. On doit juste savoir si ces actions sont lancées lorsqu'elles sont supposées l'être, et ce, avec les valeurs attendues.
+
+Pour tester cela, on doit passer un store fictif à Vue lorsque l'on isole notre composant.
+
+Au lieu de passer le store au constructeur de base de Vue, on peut le passer à - [`localVue`](../api/options.md#localvue). Un `localVue` est un constructeur à portée limitée de Vue sur lequel on peut effectuer des changements sans avoir à affecter le constructeur global.
+
+Voyons à quoi cela ressemble :
+
+``` js
+import { shallow, createLocalVue } from 'vue-test-utils'
+import Vuex from 'vuex'
+import Actions from '../../../src/components/Actions'
+
+const localVue = createLocalVue()
+
+localVue.use(Vuex)
+
+describe('Actions.vue', () => {
+ let actions
+ let store
+
+ beforeEach(() => {
+ actions = {
+ actionClick: jest.fn(),
+ actionInput: jest.fn()
+ }
+ store = new Vuex.Store({
+ state: {},
+ actions
+ })
+ })
+
+ it("appelle l'action `actionInput` du store quand la valeur du champ est `input` et qu'un évènement `input` est lancé", () => {
+ const wrapper = shallow(Actions, { store, localVue })
+ const input = wrapper.find('input')
+ input.element.value = 'input'
+ input.trigger('input')
+ expect(actions.actionInput).toHaveBeenCalled()
+ })
+
+ it("n'appelle pas l'action `actionInput` du store quand la valeur du champ n'est pas `input` et qu'un évènement `input` est lancé", () => {
+ const wrapper = shallow(Actions, { store, localVue })
+ const input = wrapper.find('input')
+ input.element.value = 'not input'
+ input.trigger('input')
+ expect(actions.actionInput).not.toHaveBeenCalled()
+ })
+
+ it("appelle l'action `actionClick` quand le bouton est cliqué", () => {
+ const wrapper = shallow(Actions, { store, localVue })
+ wrapper.find('button').trigger('click')
+ expect(actions.actionClick).toHaveBeenCalled()
+ })
+})
+```
+
+Que se passe-t-il ici ? Premièrement, on indique à Vue d'utiliser Vuex avec la méthode `use`. C'est tout simplement une surcouche de `Vue.use`.
+
+On va ensuite créer un store fictif en appelant `new Vuex.Store` avec nos propres valeurs. À noter que l'on indique uniquement nos actions, car on ne s'intéresse qu'à elles.
+
+Les actions sont des [fonctions de simulations de Jest](https://facebook.github.io/jest/docs/en/mock-functions.html). Ces fonctions nous donnent accès à des méthodes afin de réaliser des assertions si l'action a été appelée ou non.
+
+On peut ensuite s'assurer dans nos tests que les actions ont été appelées au bon moment.
+
+La manière dont on définit le store peut vous paraitre un peu étrange.
+
+On utilise `beforeEach` pour s'assurer que nous avons un store propre avant chaque test. `beforeEach` est un hook de Mocha qui est appelé avant chaque test. Dans nos tests, on réassigne des valeurs aux variables du store. Si on ne le fait pas, les fonctions de simulations auraient besoin d'être automatiquement réinitialisées. Cela nous laisse la possibilité de changer l'état dans nos tests, sans avoir à affecter les prochains.
+
+La chose la plus importante à noter dans ce test est que **l'on crée une simulation d'un store Vuex, qui est ensuite passé à `vue-test-utils`**.
+
+Génial, on peut désormais simuler des actions. Allons avoir comment simuler des accesseurs !
+
+## Simuler des accesseurs
+
+
+``` html
+
+
+
{{inputValue}}
+
{{clicks}}
+
+
+
+
+```
+
+C'est un composant relativement simple. Il affiche le résultat des accesseurs `clicks` et `inputValue`. Encore une fois, on se fiche de savoir ce que ces accesseurs retournent. On souhaite juste savoir si les résultats sont affichés correctement.
+
+Jetons un œil à un test :
+
+``` js
+import { shallow, createLocalVue } from 'vue-test-utils'
+import Vuex from 'vuex'
+import Actions from '../../../src/components/Getters'
+
+const localVue = createLocalVue()
+
+localVue.use(Vuex)
+
+describe('Getters.vue', () => {
+ let getters
+ let store
+
+ beforeEach(() => {
+ getters = {
+ clicks: () => 2,
+ inputValue: () => 'input'
+ }
+
+ store = new Vuex.Store({
+ getters
+ })
+ })
+
+ it('affiche `state.inputValue` dans la première balise
', () => {
+ const wrapper = shallow(Actions, { store, localVue })
+ const p = wrapper.find('p')
+ expect(p.text()).toBe(getters.inputValue())
+ })
+
+ it('affiche `stat.clicks` dans la seconde balise
', () => {
+ const wrapper = shallow(Actions, { store, localVue })
+ const p = wrapper.findAll('p').at(1)
+ expect(p.text()).toBe(getters.clicks().toString())
+ })
+})
+```
+
+Ce test est similaire à notre test sur les actions. On créer un store fictif avant chaque test, on le passe ensuite comme une option lorsque l'on appelle `shallow`. Pour finir, on asserte que la valeur retournée par nos accesseurs fictifs est bien affichée.
+
+C'est génial, mais comment faisons-nous pour vérifier que nos accesseurs retournent correctement les parties de l'état ?
+
+## Simulation avec des modules
+
+Les [modules](https://vuex.vuejs.org/en/modules.html) sont utiles pour séparer un store en plusieurs morceaux. Ils exportent des accesseurs que l'on peut utiliser dans nos tests.
+
+Jetons un œil à ce composant :
+
+``` html
+
+
+
+
{{moduleClicks}}
+
+
+
+
+```
+
+Simple composant qui possède une action et un accesseur.
+
+Et le test :
+
+``` js
+import { shallow, createLocalVue } from 'vue-test-utils'
+import Vuex from 'vuex'
+import Modules from '../../../src/components/Modules'
+import module from '../../../src/store/module'
+
+const localVue = createLocalVue()
+
+localVue.use(Vuex)
+
+describe('Modules.vue', () => {
+ let actions
+ let state
+ let store
+
+ beforeEach(() => {
+ state = {
+ module: {
+ clicks: 2
+ }
+ }
+
+ actions = {
+ moduleActionClick: jest.fn()
+ }
+
+ store = new Vuex.Store({
+ state,
+ actions,
+ getters: module.getters
+ })
+ })
+
+ it("appelle l'action du store moduleActionClick quand le bouton est cliqué", () => {
+ const wrapper = shallow(Modules, { store, localVue })
+ const button = wrapper.find('button')
+ button.trigger('click')
+ expect(actions.moduleActionClick).toHaveBeenCalled()
+ })
+
+ it("affiche `state.inputValue` dans la première balise
", () => {
+ const wrapper = shallow(Modules, { store, localVue })
+ const p = wrapper.find('p')
+ expect(p.text()).toBe(state.module.clicks.toString())
+ })
+})
+```
+
+### Ressources
+
+- [Projet exemple pour ce guide](https://github.com/eddyerburgh/vue-test-utils-vuex-example)
+- [`localVue`](../api/options.md#localvue)
+- [`createLocalVue`](../api/createLocalVue.md)