Guide: testing-SFCs-with-jest.md #5
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Yaty
added
Relecture nécessaire
Traduction en cours
and removed
Traduction en cours
labels
|
Je me lance. Même pas peur. |
MachinisteWeb
requested changes
Oct 17, 2017
| # 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). |
| ## 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`). |
There was a problem hiding this comment.
remplace « e.g. » par « par ex. » chaque fois que tu le croise.
De la même manière chaque i.e. que tu croises seront des « c.-à-d. »
| ## 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` : |
| "js", | ||
| "json", | ||
| // tell Jest to handle *.vue files | ||
| // indique à Jest de gérer les fichiers *.vue |
There was a problem hiding this comment.
`*.vue`
Tu peux PR l'original si tu le souhaites.
| ], | ||
| "transform": { | ||
| // process *.vue files with jest-vue | ||
| // traite les fichiers *.vue avec jest-vue |
| 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`: |
| ### 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). |
There was a problem hiding this comment.
chaine (graphie rectifiée 1990)
| ### 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`. |
| ### 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`. |
|
|
||
| describe('Component', () => { | ||
| test('is a Vue instance', () => { | ||
| describe('Composant', () => { |
rspt
suggested changes
Oct 17, 2017
| ``` | ||
|
|
||
| > **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). | ||
| > **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). | ||
| > **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). |
| "transform": { | ||
| // ... | ||
| // process js with babel-jest | ||
| // gèrer le JavaScript avec babel-jest |
| > 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. |
| 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`). |
| ``` | ||
|
|
||
| Then configure it in `package.json`: | ||
| Puis configurez le dans `package.json`: |
| "jest": { | ||
| // ... | ||
| // serializer for snapshots | ||
| // serialiseur pour les instantanés |
rspt
approved these changes
Oct 17, 2017
rspt
reviewed
Oct 17, 2017
| ``` | ||
|
|
||
| > **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). | ||
| > **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). |
There was a problem hiding this comment.
"support des blocs personnalisés"
@Yaty Excuse-moi, j'ai changé par erreur le mot "bloc" dans ma première review. Je pense que c'est plus juste de laisser blocs plutôt que blocks.
MachinisteWeb
requested changes
Oct 21, 2017
| > Un exemple de projet 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/). |
| ## 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 (ex. le template `webpack-simple` via `vue-cli`). |
There was a problem hiding this comment.
je pense pas que le « de » soit nécessaire en fait. Il alourdi la phrase.
| ``` | ||
|
|
||
| > **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). | ||
| > **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). |
| ## 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 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` : |
| > 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`. | ||
| 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. |
Kocal
approved these changes
Oct 22, 2017
MachinisteWeb
approved these changes
Oct 23, 2017
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Traduction du fichier testing-SFCs-with-jest.md
Je n'ai fait qu'une seule relecture, ça risque d'être un peu brut et pas forcement trop agréable à lire. A voir :)