From 6a23cff1a5fc64ee1496b9f1a6ea0d52663a7e50 Mon Sep 17 00:00:00 2001 From: Yaty Date: Sat, 14 Oct 2017 23:06:01 +0200 Subject: [PATCH 1/8] =?UTF-8?q?testing-SFCs-with-jest.md:=20traduction,=20?= =?UTF-8?q?premi=C3=A8re=20it=C3=A9ration?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/en/guides/testing-SFCs-with-jest.md | 85 ++++++++++++------------ 1 file changed, 42 insertions(+), 43 deletions(-) diff --git a/docs/en/guides/testing-SFCs-with-jest.md b/docs/en/guides/testing-SFCs-with-jest.md index 0bd70718d..afc9dd9bb 100644 --- a/docs/en/guides/testing-SFCs-with-jest.md +++ b/docs/en/guides/testing-SFCs-with-jest.md @@ -1,20 +1,20 @@ -# Testing Single File Components with Jest +# Tester des composants monofichiers avec Jest -> An example project for this setup is available on [GitHub](https://github.com/vuejs/vue-test-utils-jest-example). +> Un projet exemple pour cette installation est disponible sur [GitHub](https://github.com/vuejs/vue-test-utils-jest-example). -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/). +Jest est un lanceur de tests développé par Facebook. Il a pour but de procurer une solution complète de tests unitaire. Vous pouvez en apprendre plus sur Jest sur [sa documentation officielle](https://facebook.github.io/jest/). -## Setting up Jest +## Installer Jest -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`. +On va supposer que vous commencez avec une installation qui a déjà webpack, vue-loader et Babel de correctement configurés (cf. le template `webpack-simple` via `vue-cli`). -The first thing to do is install Jest and `vue-test-utils`: +La première chose à faire est d'installer Jest et `vue-test-utils` : ```bash $ npm install --save-dev jest vue-test-utils ``` -Next we need to define a unit script in our `package.json`. +Ensuite, on doit définir un script dans notre `package.json`. ```json // package.json @@ -25,15 +25,15 @@ Next we need to define a unit script in our `package.json`. } ``` -## Processing SFCs in Jest +## Traiter les composants monofichiers dans Jest -To teach Jest how to process `*.vue` files, we will need to install and configure the `jest-vue` preprocessor: +Pour indiquer à Jest comment traiter les fichiers `*.vue`, on va avoir besoin d'installer et de configurer le pré-processeur `jest-vue` : ``` bash npm install --save-dev jest-vue ``` -Next, create a `jest` block in `package.json`: +Ensuite, créez un objet `jest` dans `package.json` : ``` json { @@ -42,30 +42,29 @@ Next, create a `jest` block in `package.json`: "moduleFileExtensions": [ "js", "json", - // tell Jest to handle *.vue files + // indique à Jest de gérer les fichiers *.vue "vue" ], "transform": { - // process *.vue files with jest-vue + // traite les fichiers *.vue avec jest-vue ".*\\.(vue)$": "/node_modules/jest-vue" }, "mapCoverage": true } } ``` +> **Note :** `jest-vue` ne supporte actuellement pas toutes les fonctionnalités de `vue-loader`, par exemple le support des blocs personalisés et du chargement de styles. De plus, quelques fonctionnalités spécifique à webpack comme le découpage du 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). -> **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). +## Gérer les alias webpack -## Handling webpack Aliases - -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: +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": { // ... - // support the same @ -> src alias mapping in source code + // gère le même alias dans le code @ -> src "moduleNameMapper": { "^@/(.*)$": "/src/$1" } @@ -73,15 +72,15 @@ If you use a resolve alias in the webpack config, e.g. aliasing `@` to `/src`, y } ``` -## Configuring Babel for Jest +## Configurer Babel pour Jest -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`: +Même si les dernières versions de Node 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 ``` -Next, we need to tell Jest to process JavaScript test files with `babel-jest` by adding an entry under `jest.transform` in `package.json`: +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 { @@ -90,7 +89,7 @@ Next, we need to tell Jest to process JavaScript test files with `babel-jest` by // ... "transform": { // ... - // process js with babel-jest + // gèrer le JavaScript avec babel-jest "^.+\\.js$": "/node_modules/babel-jest" }, // ... @@ -98,15 +97,15 @@ Next, we need to tell Jest to process JavaScript test files with `babel-jest` by } ``` -> 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. +> Par défaut, `babel-jest` va automatiquement s'auto-configurer 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`. -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. +En assumant 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. -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. +On doit aussi indiquer à `babel-preset-env` d'utiliser la version de Node que nous utilisons. Cela empêchera de transpiler inutilement des fonctionnalités et lancera nos tests plus rapidement. -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`). +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`). -Example `.babelrc`: +Exemple `.babelrc`: ``` json { @@ -123,24 +122,24 @@ Example `.babelrc`: } ``` -### Snapshot Testing +### Test d'instantanés -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). +Vous pouvez utiliser [`vue-server-renderer`](https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer) pour transformer un composant en une chaîne 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). -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: +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 ``` -Then configure it in `package.json`: +Puis configurez le dans `package.json`: ``` json { // ... "jest": { // ... - // serializer for snapshots + // serialiseur pour les instantanés "snapshotSerializers": [ "/node_modules/jest-serializer-vue" ] @@ -148,31 +147,31 @@ Then configure it in `package.json`: } ``` -### Placing Test Files +### Placer les fichiers de tests -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. +Par défaut, Jest va récursivement récupérer tous les fichier 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 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. +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. -### Example Spec +### Exemple d'une spécification -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): +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' +import Composant from './composant' -describe('Component', () => { - test('is a Vue instance', () => { - const wrapper = mount(Component) +describe('Composant', () => { + test('est une instance de Vue', () => { + const wrapper = mount(Composant) expect(wrapper.isVueInstance()).toBeTruthy() }) }) ``` -### Resources +### Ressources -- [Example project for this setup](https://github.com/vuejs/vue-test-utils-jest-example) -- [Examples and slides from Vue Conf 2017](https://github.com/codebryo/vue-testing-with-jest-conf17) +- [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) From f63fabc0ca4b9a402e1b4f8af78f6b94e42df145 Mon Sep 17 00:00:00 2001 From: Hugo Da Roit Date: Sat, 14 Oct 2017 23:52:38 +0200 Subject: [PATCH 2/8] Nouvelle ligne --- docs/en/guides/testing-SFCs-with-jest.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/en/guides/testing-SFCs-with-jest.md b/docs/en/guides/testing-SFCs-with-jest.md index afc9dd9bb..6e54e76e5 100644 --- a/docs/en/guides/testing-SFCs-with-jest.md +++ b/docs/en/guides/testing-SFCs-with-jest.md @@ -53,6 +53,7 @@ Ensuite, créez un objet `jest` dans `package.json` : } } ``` + > **Note :** `jest-vue` ne supporte actuellement pas toutes les fonctionnalités de `vue-loader`, par exemple le support des blocs personalisés et du chargement de styles. De plus, quelques fonctionnalités spécifique à webpack comme le découpage du 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). ## Gérer les alias webpack From 279710a055540a93ab9faec1bcfd5a3d44822ad2 Mon Sep 17 00:00:00 2001 From: Yaty Date: Mon, 16 Oct 2017 22:12:58 +0200 Subject: [PATCH 3/8] corrections --- docs/en/guides/testing-SFCs-with-jest.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/en/guides/testing-SFCs-with-jest.md b/docs/en/guides/testing-SFCs-with-jest.md index 6e54e76e5..ccd7dbf46 100644 --- a/docs/en/guides/testing-SFCs-with-jest.md +++ b/docs/en/guides/testing-SFCs-with-jest.md @@ -160,11 +160,11 @@ Si vous êtes habitué à Jasmine, vous devriez très bien vous en sortir avec [ ```js import { mount } from 'vue-test-utils' -import Composant from './composant' +import Component from './component' describe('Composant', () => { test('est une instance de Vue', () => { - const wrapper = mount(Composant) + const wrapper = mount(Component) expect(wrapper.isVueInstance()).toBeTruthy() }) }) From 195d85f798ea73ffe24d103600dfb6da51adb4f2 Mon Sep 17 00:00:00 2001 From: Hugo Da Roit Date: Tue, 17 Oct 2017 15:01:53 +0200 Subject: [PATCH 4/8] corrections --- docs/en/guides/testing-SFCs-with-jest.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/en/guides/testing-SFCs-with-jest.md b/docs/en/guides/testing-SFCs-with-jest.md index ccd7dbf46..14e551168 100644 --- a/docs/en/guides/testing-SFCs-with-jest.md +++ b/docs/en/guides/testing-SFCs-with-jest.md @@ -54,7 +54,7 @@ Ensuite, créez un objet `jest` dans `package.json` : } ``` -> **Note :** `jest-vue` ne supporte actuellement pas toutes les fonctionnalités de `vue-loader`, par exemple le support des blocs personalisés et du chargement de styles. De plus, quelques fonctionnalités spécifique à webpack comme le découpage du 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). +> **Note :** `jest-vue` ne supporte actuellement pas toutes les fonctionnalités de `vue-loader`, par exemple le support des blocks personalisés et du chargement de styles. De plus, quelques fonctionnalités spécifique à webpack comme le découpage du 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). ## Gérer les alias webpack @@ -90,7 +90,7 @@ Ensuite, on doit indiquer à Jest de gérer les fichiers de tests JavaScript ave // ... "transform": { // ... - // gèrer le JavaScript avec babel-jest + // gérer le JavaScript avec babel-jest "^.+\\.js$": "/node_modules/babel-jest" }, // ... @@ -98,13 +98,13 @@ Ensuite, on doit indiquer à Jest de gérer les fichiers de tests JavaScript ave } ``` -> Par défaut, `babel-jest` va automatiquement s'auto-configurer 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`. +> 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 assumant 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. On doit aussi indiquer à `babel-preset-env` d'utiliser la version de Node 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`). +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`: @@ -133,14 +133,14 @@ Le résultat du rendu de `vue-server-renderer` inclut quelques attributs spécif npm install --save-dev jest-serializer-vue ``` -Puis configurez le dans `package.json`: +Puis configurez-le dans `package.json`: ``` json { // ... "jest": { // ... - // serialiseur pour les instantanés + // sérialiseur pour les instantanés "snapshotSerializers": [ "/node_modules/jest-serializer-vue" ] From 6277799a5992f11ed2ad33277874bd51c0e0610e Mon Sep 17 00:00:00 2001 From: Hugo Da Roit Date: Tue, 17 Oct 2017 21:46:23 +0200 Subject: [PATCH 5/8] corrections --- docs/en/guides/testing-SFCs-with-jest.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/en/guides/testing-SFCs-with-jest.md b/docs/en/guides/testing-SFCs-with-jest.md index 14e551168..1162e0a13 100644 --- a/docs/en/guides/testing-SFCs-with-jest.md +++ b/docs/en/guides/testing-SFCs-with-jest.md @@ -1,12 +1,12 @@ # Tester des composants monofichiers avec Jest -> Un projet exemple pour cette installation est disponible sur [GitHub](https://github.com/vuejs/vue-test-utils-jest-example). +> 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 unitaire. 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 de correctement configurés (cf. le template `webpack-simple` via `vue-cli`). +On va supposer que vous commencez avec une installation qui a déjà webpack, vue-loader et Babel de correctement configurés (ex. le template `webpack-simple` via `vue-cli`). La première chose à faire est d'installer Jest et `vue-test-utils` : @@ -27,7 +27,7 @@ Ensuite, on doit définir un script dans notre `package.json`. ## 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 `jest-vue` : +Pour indiquer à Jest comment traiter les fichiers `*.vue`, on va avoir besoin d'installer et de configurer le préprocesseur `jest-vue` : ``` bash npm install --save-dev jest-vue @@ -42,11 +42,11 @@ Ensuite, créez un objet `jest` dans `package.json` : "moduleFileExtensions": [ "js", "json", - // indique à Jest de gérer les fichiers *.vue + // indique à Jest de gérer les fichiers `*.vue` "vue" ], "transform": { - // traite les fichiers *.vue avec jest-vue + // traite les fichiers `*.vue` avec jest-vue ".*\\.(vue)$": "/node_modules/jest-vue" }, "mapCoverage": true @@ -58,14 +58,14 @@ Ensuite, créez un objet `jest` dans `package.json` : ## 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` : +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": { // ... - // gère le même alias dans le code @ -> src + // supporte la même concordonance d'alias @ -> src dans le code source "moduleNameMapper": { "^@/(.*)$": "/src/$1" } @@ -75,7 +75,7 @@ Si vous utilisez un alias de résolution dans la configuration de webpack, c.à. ## Configurer Babel pour Jest -Même si les dernières versions de Node 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` : +Même si les dernières version de Node 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 @@ -102,7 +102,7 @@ Ensuite, on doit indiquer à Jest de gérer les fichiers de tests JavaScript ave En assumant 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. -On doit aussi indiquer à `babel-preset-env` d'utiliser la version de Node que nous utilisons. Cela empêchera de transpiler inutilement des fonctionnalités et lancera nos tests plus rapidement. +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`). @@ -125,7 +125,7 @@ Exemple `.babelrc`: ### 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 chaîne 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). +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é : @@ -150,7 +150,7 @@ Puis configurez-le dans `package.json`: ### Placer les fichiers de tests -Par défaut, Jest va récursivement récupérer tous les fichier 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`. +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. @@ -162,7 +162,7 @@ Si vous êtes habitué à Jasmine, vous devriez très bien vous en sortir avec [ import { mount } from 'vue-test-utils' import Component from './component' -describe('Composant', () => { +describe('Component', () => { test('est une instance de Vue', () => { const wrapper = mount(Component) expect(wrapper.isVueInstance()).toBeTruthy() From ec80585d071bb6f402b88a183d6f437d5cefe7e5 Mon Sep 17 00:00:00 2001 From: Hugo Da Roit Date: Tue, 17 Oct 2017 22:09:06 +0200 Subject: [PATCH 6/8] corrections --- docs/en/guides/testing-SFCs-with-jest.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/guides/testing-SFCs-with-jest.md b/docs/en/guides/testing-SFCs-with-jest.md index 1162e0a13..c9d963291 100644 --- a/docs/en/guides/testing-SFCs-with-jest.md +++ b/docs/en/guides/testing-SFCs-with-jest.md @@ -54,7 +54,7 @@ Ensuite, créez un objet `jest` dans `package.json` : } ``` -> **Note :** `jest-vue` ne supporte actuellement pas toutes les fonctionnalités de `vue-loader`, par exemple le support des blocks personalisés et du chargement de styles. De plus, quelques fonctionnalités spécifique à webpack comme le découpage du 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). +> **Note :** `jest-vue` ne supporte actuellement pas toutes les fonctionnalités de `vue-loader`, par exemple le support des blocks personnalisés et du chargement de styles. De plus, quelques fonctionnalités spécifiques à webpack comme le découpage du 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). ## Gérer les alias webpack From 2790f6de046f0c0371604a03a3b0f1c248638997 Mon Sep 17 00:00:00 2001 From: Hugo Da Roit Date: Wed, 18 Oct 2017 21:15:27 +0200 Subject: [PATCH 7/8] correction --- docs/en/guides/testing-SFCs-with-jest.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/guides/testing-SFCs-with-jest.md b/docs/en/guides/testing-SFCs-with-jest.md index c9d963291..bbecf6485 100644 --- a/docs/en/guides/testing-SFCs-with-jest.md +++ b/docs/en/guides/testing-SFCs-with-jest.md @@ -54,7 +54,7 @@ Ensuite, créez un objet `jest` dans `package.json` : } ``` -> **Note :** `jest-vue` ne supporte actuellement pas toutes les fonctionnalités de `vue-loader`, par exemple le support des blocks personnalisés et du chargement de styles. De plus, quelques fonctionnalités spécifiques à webpack comme le découpage du 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). +> **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 le découpage du 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). ## Gérer les alias webpack From 06ec0d92f65b204bdf5989d71384d087b64b1d44 Mon Sep 17 00:00:00 2001 From: Hugo Da Roit Date: Sat, 21 Oct 2017 18:50:19 +0200 Subject: [PATCH 8/8] corrections --- docs/en/guides/testing-SFCs-with-jest.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/en/guides/testing-SFCs-with-jest.md b/docs/en/guides/testing-SFCs-with-jest.md index bbecf6485..f802c5311 100644 --- a/docs/en/guides/testing-SFCs-with-jest.md +++ b/docs/en/guides/testing-SFCs-with-jest.md @@ -2,11 +2,11 @@ > 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 unitaire. Vous pouvez en apprendre plus sur Jest sur [sa documentation officielle](https://facebook.github.io/jest/). +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 de correctement configurés (ex. le template `webpack-simple` via `vue-cli`). +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` : @@ -54,7 +54,7 @@ Ensuite, créez un objet `jest` dans `package.json` : } ``` -> **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 le découpage du 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). +> **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). ## Gérer les alias webpack @@ -75,7 +75,7 @@ Si vous utilisez un alias de résolution dans la configuration de webpack, c.-à ## Configurer Babel pour Jest -Même si les dernières version de Node 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` : +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 @@ -100,7 +100,7 @@ Ensuite, on doit indiquer à Jest de gérer les fichiers de tests JavaScript ave > 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 assumant 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. +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.