Menguji Aplikasi React dengan Cypress: Panduan Komprehensif

pengenalan

Pengujian ialah bahagian penting dalam proses pembangunan, memastikan aplikasi anda berkelakuan seperti yang diharapkan dan kekal teguh dari semasa ke semasa. Cypress ialah rangka kerja ujian hujung ke hujung yang berkuasa yang menawarkan pengalaman pembangun yang sangat baik dan disepadukan dengan lancar dengan rangka kerja JavaScript moden seperti React. Dalam siaran ini, kami akan meneroka cara menyediakan dan menguji aplikasi React menggunakan Cypress, memfokuskan pada contoh praktikal dan amalan terbaik.

Mengapa Menggunakan Cypress untuk Ujian Reaksi?

1. Pengalaman Pembangun: Cypress menawarkan API intuitif, muat semula masa nyata dan penyahpepijatan interaktif, menjadikannya mudah untuk menulis dan menyelenggara ujian.
2. Pantas dan Boleh Dipercayai: Cypress berjalan terus dalam penyemak imbas, memberikan ujian yang pantas dan boleh dipercayai dengan keputusan yang konsisten.
3. Ciri Berkuasa: Cypress termasuk ciri terbina dalam seperti perjalanan masa, menunggu automatik dan mesej ralat terperinci, meningkatkan kualiti ujian dan produktiviti.
4. Penyatuan Lancar: Cypress disepadukan dengan lancar dengan aplikasi React, membolehkan anda menguji komponen, interaksi dan aliran pengguna dengan berkesan.

Menyediakan Cypress untuk React

Untuk bermula dengan Cypress dalam aplikasi React, ikut langkah berikut:

Langkah 1: Pasang Cypress
Mula-mula, pasang Cypress sebagai pergantungan pembangunan dalam projek React anda:

npm install cypress --save-dev

Langkah 2: Konfigurasikan Cypress
Buka Cypress Test Runner dengan menjalankan:

npx cypress open

Ini akan mencipta folder cypress dalam projek anda dengan konfigurasi lalai dan ujian contoh. Anda boleh menyesuaikan konfigurasi dalam fail cypress.json jika perlu.
Langkah 3: Buat Fail Ujian
Di dalam direktori cypress/e2e, buat fail ujian baharu, contohnya, react-app.spec.js. Fail ini akan mengandungi ujian Cypress anda untuk aplikasi React.

Menulis Ujian Cypress untuk React
Mari tulis beberapa ujian asas untuk aplikasi React. Kami akan merangkumi pemaparan komponen, interaksi dan penegasan.

Contoh: Menguji Komponen Reaksi
Katakan kita mempunyai komponen React ringkas yang dipanggil Counter:

import React, { useState } from 'react';

const Counter = () => {
    const [count, setCount] = useState(0);

    return (
        <div>
            <h1>Counter: {count}</h1>
            <button onClick={() => setCount(count + 1)}>Increment</button>
            <button onClick={() => setCount(count - 1)}>Decrement</button>
        </div>
    );
};

export default Counter;

Kami boleh menulis ujian Cypress untuk mengesahkan kelakuan komponen:

describe('Counter Component', () => {
    beforeEach(() => {
        cy.visit('/');
    });

    it('should render the counter with initial value', () => {
        cy.get('h1').contains('Counter: 0');
    });

    it('should increment the counter', () => {
        cy.get('button').contains('Increment').click();
        cy.get('h1').contains('Counter: 1');
    });

    it('should decrement the counter', () => {
        cy.get('button').contains('Increment').click();
        cy.get('button').contains('Decrement').click();
        cy.get('h1').contains('Counter: 0');
    });
});

Dalam ujian ini:

• Kami menggunakan cy.visit('/') untuk menavigasi ke URL akar aplikasi.
• Kami menggunakan cy.get() untuk memilih elemen mengikut kandungan teks atau pemilih CSS mereka.
• Kami menggunakan cy.contains() untuk mengesahkan bahawa elemen yang dipilih mengandungi teks tertentu.
• Kami menggunakan cy.click() untuk mensimulasikan klik butang dan mencetuskan interaksi.

Senario Ujian Lanjutan

Input Borang Pengujian
Katakan kita mempunyai borang log masuk dengan input nama pengguna dan kata laluan. Begini cara kami boleh mengujinya:

describe('Login Form', () => {
    beforeEach(() => {
        cy.visit('/login');
    });

    it('should allow a user to type in the username and password', () => {
        cy.get('input[name="username"]').type('testuser');
        cy.get('input[name="password"]').type('password123');
    });

    it('should show an error message for invalid credentials', () => {
        cy.get('input[name="username"]').type('invaliduser');
        cy.get('input[name="password"]').type('wrongpassword');
        cy.get('button[type="submit"]').click();
        cy.get('.error-message').should('be.visible').and('contain', 'Invalid credentials');
    });

    it('should redirect to dashboard on successful login', () => {
        cy.get('input[name="username"]').type('testuser');
        cy.get('input[name="password"]').type('password123');
        cy.get('button[type="submit"]').click();
        cy.url().should('include', '/dashboard');
    });
});

Permintaan API Mengejek
Anda boleh menggunakan Cypress untuk memintas dan mengejek permintaan API untuk menguji senario yang berbeza tanpa bergantung pada bahagian belakang:

describe('API Mocking', () => {
    beforeEach(() => {
        cy.intercept('POST', '/api/login', { statusCode: 200, body: { token: 'fakeToken' } }).as('loginRequest');
        cy.visit('/login');
    });

    it('should mock a successful login', () => {
        cy.get('input[name="username"]').type('testuser');
        cy.get('input[name="password"]').type('password123');
        cy.get('button[type="submit"]').click();
        cy.wait('@loginRequest').its('response.statusCode').should('eq', 200);
        cy.url().should('include', '/dashboard');
    });
});

Amalan Terbaik untuk Menguji Aplikasi React dengan Cypress

1. Ujian Asing: Pastikan ujian bebas untuk mengelakkan kesan sampingan dan memastikan kebolehpercayaan.
2. Gunakan Lekapan: Simpan data ujian dalam lekapan untuk memastikan ujian bersih dan boleh diselenggara.
3. Manfaatkan Perintah Tersuai: Cipta perintah Cypress tersuai untuk merangkum logik ujian boleh guna semula.
4. Jalankan Ujian dalam CI/CD: Sepadukan ujian Cypress ke dalam saluran paip CI/CD anda untuk mengetahui isu lebih awal.
5. Uji Kebolehcapaian: Sertakan ujian kebolehaksesan menggunakan alatan seperti cypress-axe untuk memastikan aplikasi anda boleh diakses.

Kesimpulan

Cypress menyediakan cara yang mantap dan mesra pembangun untuk menguji aplikasi React. Dengan mengikuti langkah dan contoh yang digariskan dalam panduan ini, anda boleh menyediakan Cypress dalam projek React anda dan menulis ujian hujung ke hujung yang berkesan. Memanfaatkan ciri hebat dan amalan terbaik Cypress akan membantu anda membuat ujian yang boleh dipercayai, boleh diselenggara dan berkualiti tinggi, memastikan aplikasi React anda berfungsi seperti yang diharapkan.

Selamat menguji!

Atas ialah kandungan terperinci Menguji Aplikasi React dengan Cypress: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!