You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
> An example project for this setup is available on[GitHub](https://github.com/vuejs/vue-test-utils-jest-example).
3
+
> Un exemple de projet pour cette installation est disponible sur[GitHub](https://github.com/vuejs/vue-test-utils-jest-example).
4
4
5
-
Jest is a test runner developed by Facebook, aiming to deliver a battery-included unit testing solution. You can learn more about Jest on its [official documentation](https://facebook.github.io/jest/).
5
+
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/).
6
6
7
-
## Setting up Jest
7
+
## Installer Jest
8
8
9
-
We will assume you are starting with a setup that already has webpack, vue-loader and Babel properly configured - e.g. the `webpack-simple`template scaffolded by `vue-cli`.
9
+
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`).
10
10
11
-
The first thing to do is install Jest and`vue-test-utils`:
11
+
La première chose à faire est d'installer Jest et`vue-test-utils`:
12
12
13
13
```bash
14
14
$ npm install --save-dev jest vue-test-utils
15
15
```
16
16
17
-
Next we need to define a unit script in our`package.json`.
17
+
Ensuite, on doit définir un script dans notre`package.json`.
18
18
19
19
```json
20
20
// package.json
@@ -25,15 +25,15 @@ Next we need to define a unit script in our `package.json`.
25
25
}
26
26
```
27
27
28
-
## Processing SFCs in Jest
28
+
## Traiter les composants monofichiers dans Jest
29
29
30
-
To teach Jest how to process `*.vue` files, we will need to install and configure the `jest-vue`preprocessor:
30
+
Pour indiquer à Jest comment traiter les fichiers `*.vue`, on va avoir besoin d'installer et de configurer le préprocesseur `jest-vue`:
31
31
32
32
```bash
33
33
npm install --save-dev jest-vue
34
34
```
35
35
36
-
Next, create a `jest`block in `package.json`:
36
+
Ensuite, créez un objet `jest`dans `package.json`:
37
37
38
38
```json
39
39
{
@@ -42,46 +42,46 @@ Next, create a `jest` block in `package.json`:
42
42
"moduleFileExtensions": [
43
43
"js",
44
44
"json",
45
-
// tell Jest to handle *.vue files
45
+
// indique à Jest de gérer les fichiers `*.vue`
46
46
"vue"
47
47
],
48
48
"transform": {
49
-
// process *.vue files with jest-vue
49
+
// traite les fichiers `*.vue` avec jest-vue
50
50
".*\\.(vue)$": "<rootDir>/node_modules/jest-vue"
51
51
},
52
52
"mapCoverage": true
53
53
}
54
54
}
55
55
```
56
56
57
-
> **Note:**`jest-vue`currently does not support all the features of`vue-loader`, for example custom block support and style loading. In addition, some webpack-specific features such as code-splitting are not supported either. To use them, read the guide on [testing SFCs with Mocha + webpack](./testing-SFCs-with-mocha-webpack.md).
57
+
> **Note:**`jest-vue`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 + webpack](./testing-SFCs-with-mocha-webpack.md).
58
58
59
-
## Handling webpack Aliases
59
+
## Gérer les alias webpack
60
60
61
-
If you use a resolve alias in the webpack config, e.g. aliasing `@`to`/src`, you need to add a matching config for Jest as well, using the `moduleNameMapper`option:
61
+
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` :
62
62
63
63
```json
64
64
{
65
65
// ...
66
66
"jest": {
67
67
// ...
68
-
// support the same @ -> src alias mapping in source code
68
+
// supporte la même concordonance d'alias @ -> src dans le code source
69
69
"moduleNameMapper": {
70
70
"^@/(.*)$": "<rootDir>/src/$1"
71
71
}
72
72
}
73
73
}
74
74
```
75
75
76
-
## Configuring Babel for Jest
76
+
## Configurer Babel pour Jest
77
77
78
-
Although latest versions of Node already supports most ES2015 features, you may still want to use ES modules syntax and stage-x features in your tests. For that we need to install `babel-jest`:
78
+
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`:
79
79
80
80
```bash
81
81
npm install --save-dev babel-jest
82
82
```
83
83
84
-
Next, we need to tell Jest to process JavaScript test files with `babel-jest`by adding an entry under`jest.transform`in`package.json`:
84
+
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`:
85
85
86
86
```json
87
87
{
@@ -90,23 +90,23 @@ Next, we need to tell Jest to process JavaScript test files with `babel-jest` by
90
90
// ...
91
91
"transform": {
92
92
// ...
93
-
// process js with babel-jest
93
+
// gérer le JavaScript avec babel-jest
94
94
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
95
95
},
96
96
// ...
97
97
}
98
98
}
99
99
```
100
100
101
-
> By default, `babel-jest`automatically configures itself as long as it's installed. However, because we have explicitly added a transform for `*.vue` files, we now need to explicitly configure`babel-jest` as well.
101
+
> 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`.
102
102
103
-
Assuming using `babel-preset-env`with webpack, the default Babel config disables ES modules transpilation because webpack already knows how to handle ES modules. However, we do need to enable it for our tests because Jest tests run directly in Node.
103
+
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.
104
104
105
-
Also, we can tell `babel-preset-env`to target the Node version we are using. This skips transpiling unnecessary features and makes our tests boot faster.
105
+
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.
106
106
107
-
To apply these options only for tests, put them in a separate config under `env.test` (this will be automatically picked up by`babel-jest`).
107
+
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`).
108
108
109
-
Example`.babelrc`:
109
+
Exemple`.babelrc`:
110
110
111
111
```json
112
112
{
@@ -123,56 +123,56 @@ Example `.babelrc`:
123
123
}
124
124
```
125
125
126
-
### Snapshot Testing
126
+
### Test d'instantanés
127
127
128
-
You can use[`vue-server-renderer`](https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer)to render a component into a string so that it can be saved as a snapshot for[Jest snapshot testing](https://facebook.github.io/jest/docs/en/snapshot-testing.html).
128
+
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).
129
129
130
-
The render result of `vue-server-renderer`includes a few SSR-specific attributes, and it ignores whitespaces, making it harder to scan a diff. We can improve the saved snapshot with a custom serializer:
130
+
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é :
131
131
132
132
```bash
133
133
npm install --save-dev jest-serializer-vue
134
134
```
135
135
136
-
Then configure it in`package.json`:
136
+
Puis configurez-le dans`package.json`:
137
137
138
138
```json
139
139
{
140
140
// ...
141
141
"jest": {
142
142
// ...
143
-
// serializer for snapshots
143
+
// sérialiseur pour les instantanés
144
144
"snapshotSerializers": [
145
145
"<rootDir>/node_modules/jest-serializer-vue"
146
146
]
147
147
}
148
148
}
149
149
```
150
150
151
-
### Placing Test Files
151
+
### Placer les fichiers de tests
152
152
153
-
By default, jest will recursively pick up all files that have a `.spec.js`or`.test.js`extension in the entire project. If this does not fit your needs, it's possible [to change the testRegex](https://facebook.github.io/jest/docs/en/configuration.html#testregex-string)in the config section in the`package.json` file.
153
+
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`.
154
154
155
-
Jest recommends creating a `__tests__`directory right next to the code being tested, but feel free to structure your tests as you see fit. Just beware that Jest would create a`__snapshots__`directory next to test files that performs snapshot testing.
155
+
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.
156
156
157
-
### Example Spec
157
+
### Exemple d'une spécification
158
158
159
-
If you are familiar with Jasmine, you should feel right at home with Jest's [assertion API](https://facebook.github.io/jest/docs/en/expect.html#content):
159
+
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):
160
160
161
161
```js
162
162
import { mount } from'vue-test-utils'
163
163
importComponentfrom'./component'
164
164
165
165
describe('Component', () => {
166
-
test('is a Vue instance', () => {
166
+
test('est une instance de Vue', () => {
167
167
constwrapper=mount(Component)
168
168
expect(wrapper.isVueInstance()).toBeTruthy()
169
169
})
170
170
})
171
171
```
172
172
173
-
### Resources
173
+
### Ressources
174
174
175
-
-[Example project for this setup](https://github.com/vuejs/vue-test-utils-jest-example)
176
-
-[Examples and slides from Vue Conf 2017](https://github.com/codebryo/vue-testing-with-jest-conf17)
175
+
-[Projet exemple pour cette installation](https://github.com/vuejs/vue-test-utils-jest-example)
176
+
-[Exemples et diapositives depuis la Vue Conf 2017](https://github.com/codebryo/vue-testing-with-jest-conf17)
0 commit comments