Vue

Ar trebui să creezi o componentă Vue principală numită App.vue ca punct de intrare al aplicației tale Vue. Codul tău Vue ar trebui să fie verificat prin linting folosind ESLint cu configurația recomandată pentru Vue.js.

Fișierul de intrare

Fișierul de intrare pentru acest șablon trebuie să fie unul dintre următoarele: index.js sau main.js. Primul găsit este utilizat ca punct de intrare.

Versiune

Rulează pe Node.js v20.0.0

Limbi suportate

Javascript

Framework de testare

Jest

Recomandări speciale și detalii de implementare

• Vue Testing Library, o librărie construită peste @vue/test-utils, de testing library oficială pentru Vue.

Exemplu cu Vue Testing Library:

import { render, screen } from '@testing-library/vue'
import App from './App.vue'

describe('App', () => {
  test('Should display "Hello World!"', () => {
    render(App);

    expect(screen.getByText("Hello World!")).toBeInTheDocument();
  })
});

Nu uita să îți păstrezi întotdeauna componentele modulare și să folosești reactivitatea Vue, proprietățile calculate și directivele pentru o gestionare eficientă a datelor și manipulări DOM.

Librării incluse

• @babel/preset-env
• babel-jest
• jest-environment-jsdom
• @testing-library/jest-dom
• @testing-library/user-event
• @testing-library/vue
• @vue/compiler-sfc
• @vue/vue3-jest
• jest-transform-stub

Provocări write-tests

Acest șablon acceptă provocări write-tests. Soluția de referință este deja scrisă, iar tu scrii testele: acestea trebuie să treacă pe soluția de referință și să prindă fiecare variantă cu bug-uri ascunsă. Test îți rulează testele doar pe soluția de referință, iar Verify tests (Verifică testele) și Submit (Trimite) le rulează și pe variantele cu bug-uri ascunse. Citește Rezolvarea unei provocări write-tests pentru întregul flux.

• Runner de teste: Jest + @testing-library/vue
• Importă @testing-library/jest-dom/jest-globals și ia describe, it, expect din @jest/globals.
• Folosește await la fiecare apel fireEvent: Vue actualizează DOM-ul la următorul tick.
• Denumește fișierele de test *.spec.js.

Un exemplu complet găsești în Exemple de write-tests după șablon.

Cum se depanează

Depanarea aplicațiilor Vue.js 3 este crucială pentru a asigura stabilitatea și corectitudinea. Utilizarea instrucțiunilor console.log() poate fi o metodă simplă, dar eficientă de a depana aplicațiile Vue.

Pași pentru depanare folosind console.log()

1. Identifică zona cu probleme: Localizează componenta Vue sau metoda în care suspectezi că se află problema.

2. Introdu instrucțiuni console.log(): Adaugă instrucțiuni console.log() înainte și după segmentul de cod pe care vrei să îl inspectezi, înregistrând date relevante, cum ar fi starea componentei, props-urile sau apelurile de metode.

3. Verifică rezultatul testelor

4. Folosește pictograma de depanare din zona de previzualizare: Fă clic pe pictograma de depanare din zona Preview pentru a verifica rezultatul din consolă sau verifică consola browserului tău.

5. Analizează rezultatul: Examinează datele înregistrate pentru a înțelege fluxul aplicației tale Vue și pentru a identifica orice comportamente neașteptate sau erori.

Iată un exemplu despre cum să folosești console.log() pentru depanare în Vue.js 3:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
    console.log('Button clicked!'); // Log button click
    count.value++;
};

console.log('Component initialized.'); // Log component initialization
</script>