From 946a3488e49af455538ed667cf17872e245da80d Mon Sep 17 00:00:00 2001 From: Sarah Dayan Date: Thu, 6 Feb 2020 16:39:11 +0100 Subject: [PATCH] fix: port changes from original documentation --- src/v2/guide/unit-testing.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/v2/guide/unit-testing.md b/src/v2/guide/unit-testing.md index 0659bbed42..52263c817c 100644 --- a/src/v2/guide/unit-testing.md +++ b/src/v2/guide/unit-testing.md @@ -29,15 +29,18 @@ En termes de structure de code pour les tests, vous n'avez rien de spécial à f ``` -Puis importez les options de composant aux côtés de Vue et vous pourrez faire une série d'assertions communes (ici nous utilisons le style Jasmine/Jest avec l'assertions `expect` en tant qu'exemple) : +Puis importez le composant avec [Vue Test Utils](https://vue-test-utils.vuejs.org/) et vous pourrez faire une série d'assertions communes (ici nous utilisons le style Jest avec l'assertions `expect` en tant qu'exemple) : ``` js -// Importer Vue et le composant à tester -import Vue from 'vue' -import MyComponent from 'path/to/MyComponent.vue' +// Importer `shallowMount` de Vue Test Utils et le composant à tester +import { shallowMount } from '@vue/test-utils' +import MyComponent from './MyComponent.vue' + +// Monter le composant +const wrapper = shallowMount(MyComponent) -// Ici nous avons plusieurs tests avec Jasmine 2.0, cependant vous pouvez utiliser -// n'importe quel combo de lanceur de tests / bibliothèque d'assertions que vous préférez +// Ici nous avons plusieurs tests avec Jest, cependant vous pouvez utiliser +// n'importe quel combo de lanceur de tests/bibliothèque d'assertions que vous préférez describe('MyComponent', () => { // Inspecter l'objet d'options du composant it('a le hook `created`', () => { @@ -54,15 +57,12 @@ describe('MyComponent', () => { // Inspecter l'instance au montage du composant it('affecte correctement les messages à la création', () => { - const vm = new Vue(MyComponent).$mount() - expect(vm.message).toBe('au revoir !') + expect(wrapper.vm.$data.message).toBe('au revoir !') }) // Monter une instance et inspecter le résultat en sortie it('rend le message correct', () => { - const Constructor = Vue.extend(MyComponent) - const vm = new Constructor().$mount() - expect(vm.$el.textContent).toBe('au revoir !') + expect(wrapper.text()).toBe('au revoir !') }) }) ```