Strategi pengujian untuk pengembang bereaksi – Beragampengetahuan

memperkenalkan

Pengujian adalah tulang punggung membangun perangkat lunak yang andal. Sebagai pengembang React, Anda mungkin pernah mendengar tentang Cypress, alat yang telah menyebabkan gelombang di komunitas pengujian. Tetapi bagaimana cara mendapatkan dari menulis tes pertama hingga menguasai solusi kompleks? Mari kita hancurkan langkah demi langkah dengan contoh nyata dan saran praktis.

Mengapa Cypress menonjol dalam tes reaksi

Bayangkan: Anda telah membangun komponen bereaksi, tetapi ketika pengguna berinteraksi dengannya, ia rusak. Anda butuh beberapa jam untuk men -debug dan hanya menyadari bahwa masalahnya adalah penyangga yang hilang. Cypress memecahkan titik nyeri ini dengan memungkinkan Anda untuk menguji komponen dalam isolasi dan mendeteksi kesalahan sedini mungkin. Tidak seperti alat pengujian tradisional, Cypress berjalan langsung di browser, memberi Anda pratinjau langsung dari tes Anda. Ini seperti memiliki sepasang mata setiap klik, arahkan dan panggilan API.

Manfaat utama:

• Tes real-time: Jalankan di browser dengan umpan balik instan.
• Tunggu Otomatis: Menghilangkan tes serpihan yang disebabkan oleh masalah waktu.
• Debugging Perjalanan Waktu: Ulang status tes untuk mengetahui kegagalan.
• Tes Komprehensif: Pengujian Unit Dukungan, Integrasi, dan End-to-End (E2E)
  Pernahkah Anda merasa ingin beralih di antara lelucon, perpustakaan uji reaksi dan obor juggling boneka? Cypress menyederhanakan ini dengan pengujian komponen pemrosesan (pengujian UI terisolasi) dan pengujian E2E (aliran pengguna penuh) dalam toolkit.

Pengujian Komponen dan Pengujian E2E: Apa bedanya?

• Pengujian Komponen: Uji pemisahan komponen reaksi individu. Bagus untuk memverifikasi alat peraga, status, dan perilaku UI.
• Tes E2E: Simulasi interaksi pengguna nyata di seluruh aplikasi. Bagus untuk menguji alur kerja seperti login → dasbor → checkout.

Pikirkan tes komponen sebagai “mode mikroskop” dan tes E2E sebagai “tampilan helikopter”. Anda semua perlu membangun kepercayaan pada aplikasi.

Menyiapkan pohon cemara di proyek reaksi Anda

Langkah 1: Instal Cypress

npm install cypress --save-dev

Ini menginstal Cypress sebagai ketergantungan pengembangan.

Kiat ahli: Jika Anda menggunakan aplikasi Create React, pastikan proyek Anda muncul atau dikonfigurasi untuk mendukung Webpack 5. Cypress mengandalkan Webpack untuk pengujian komponen.

Langkah 2: Konfigurasikan pohon cemara

Buat a cypress.config.js Arsip di Root Proyek Anda:

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'webpack',
    },
  },
  e2e: {
    setupNodeEvents(on, config) {},
    baseUrl: '
  },
});

Langkah 3: Atur tes

cypress/
├── e2e/           # E2E test files
│    └── login.cy.js
├── component/     # Component test files
│    └── Button.cy.js
└── fixtures/      # Mock data

Pemisahan ini memastikan kejelasan dan pemeliharaan.

Langkah 4: Mulai Cypress Test Runner

Pilih tes komponen dan konfigurasikan sebagai prompt.

Tulis tes pertama Anda: komponen tombol

Komponen

membuat src/components/Button.js:

import React from 'react';

const Button = ({ onClick, children, disabled = false }) => {
  return (
    <button 
      onClick={onClick} 
      disabled={disabled}
      data-testid="custom-button"
    >
      {children}
    </button>
  );
};

export default Button;

tes

membuat cypress/component/Button.cy.js:

import React from 'react';
import Button from '../../src/components/Button';

describe('Button Component', () => {
  it('renders a clickable button', () => {
    const onClickSpy = cy.spy().as('onClickSpy');
    cy.mount(<Button onClick={onClickSpy}>Submit</Button>);
    cy.get('[data-testid="custom-button"]').should('exist').and('have.text', 'Submit');
    cy.get('[data-testid="custom-button"]').click();
    cy.get('@onClickSpy').should('have.been.calledOnce');
  });

  it('disables the button when the disabled prop is true', () => {
    cy.mount(<Button disabled={true}>Disabled Button</Button>);
    cy.get('[data-testid="custom-button"]').should('be.disabled');
  });
});

Poin -Poin Kunci:

• mengintai:cy.spy() Panggilan fungsi pelacakan.
• Pemilih:data-testid Pastikan tujuan yang kuat.
• Pernyataan: rantai .should() Membutuhkan keterbacaan.
• Alias:cy.get('@onClickSpy') Referensi untuk mata -mata.

Teknologi Pengujian Lanjutan

Pemrosesan Penyedia Konteks

pertanyaan: Komponen Anda bergantung pada router bereaksi atau redux.

Larutan: Bungkusnya dalam penyedia uji.

Uji komponen reaksi router:

import { MemoryRouter } from 'react-router-dom';
cy.mount(
  <MemoryRouter initialEntries={['/dashboard']}>
    <Navbar />
  </MemoryRouter>
);

Komponen uji yang terhubung ke redux:

import { Provider } from 'react-redux';
import { store } from '../../src/redux/store';
cy.mount(
  <Provider store={store}>
    <UserProfile />
  </Provider>
);

Peningkatan: Komponen Formulir Uji

Mari kita selesaikan contoh yang lebih kompleks: formulir login.

Komponen

membuat src/components/LoginForm.js:

import React, { useState } from 'react';

const LoginForm = ({ onSubmit }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (email.trim() && password.trim()) {
      onSubmit({ email, password });
    }
  };

  return (
    <form onSubmit={handleSubmit} data-testid="login-form">
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        data-testid="email-input"
        placeholder="Email"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        data-testid="password-input"
        placeholder="Password"
      />
      <button type="submit" data-testid="submit-button">
        Log In
      </button>
    </form>
  );
};

export default LoginForm;

tes

membuat cypress/component/LoginForm.spec.js:

import React from 'react';
import LoginForm from '../../src/components/LoginForm';

describe('LoginForm Component', () => {
  it('submits the form with email and password', () => {
    const onSubmitSpy = cy.spy().as('onSubmitSpy');
    cy.mount(<LoginForm onSubmit={onSubmitSpy} />);
    
    cy.get('[data-testid="email-input"]').type('test@example.com').should('have.value', 'test@example.com');
    cy.get('[data-testid="password-input"]').type('password123').should('have.value', 'password123');
    
    cy.get('[data-testid="submit-button"]').click();
    
    cy.get('@onSubmitSpy').should('have.been.calledWith', {
      email: 'test@example.com',
      password: 'password123',
    });
  });

  it('does not submit if email is missing', () => {
    const onSubmitSpy = cy.spy().as('onSubmitSpy');
    cy.mount(<LoginForm onSubmit={onSubmitSpy} />);
    
    cy.get('[data-testid="password-input"]').type('password123');
    cy.get('[data-testid="submit-button"]').click();
    
    cy.get('@onSubmitSpy').should('not.have.been.called');
  });
});

Poin -Poin Kunci:

• menggunakan .type() Mensimulasikan input pengguna.
• Pernyataan rantai untuk memverifikasi nilai input.
• Kasus tepi uji, seperti bidang yang hilang.

Pintasan otentikasi

pertanyaan: Uji rute otentikasi tanpa setiap catatan.
Larutan: menggunakan cy.session() Pergi ke status login cache.

beforeEach(() => {
  cy.session('login', () => {
    cy.visit('/login');
    cy.get('[data-testid="email-input"]').type('user@example.com');
    cy.get('[data-testid="password-input"]').type('password123');
    cy.get('[data-testid="submit-button"]').click();
    cy.url().should('include', '/dashboard');
  });
  cy.visit('/dashboard'); // Now authenticated!
});

Ini melewatkan login berlebihan di seluruh tes dan menghemat waktu.

Menangani permintaan API dan logika asinkron

Sebagian besar aplikasi bereaksi mendapatkan data dari API. Mari kita uji komponen yang memuat data pengguna.

Komponen

membuat src/components/UserList.js:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const UserList = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    axios.get('
      .then((response) => {
        setUsers(response.data);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

  return (
    <div data-testid="user-list">
      {loading ? (
        <p>Loading...</p>
      ) : (
        <ul>
          {users.map((user) => (
            <li key={user.id} data-testid={`user-${user.id}`}>
              {user.name}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default UserList;

tes

membuat cypress/component/UserList.spec.js:

import React from 'react';
import UserList from '../../src/components/UserList';

describe('UserList Component', () => {
  it('displays a loading state and then renders users', () => {
    cy.intercept('GET', ' {
      delayMs: 1000,
      body: [{ id: 1, name: 'John Doe' }, { id: 2, name: 'Jane Smith' }],
    }).as('getUsers');

    cy.mount(<UserList />);
    
    cy.get('[data-testid="user-list"]').contains('Loading...');
    
    cy.wait('@getUsers').its('response.statusCode').should('eq', 200);
    
    cy.get('[data-testid="user-1"]').should('have.text', 'John Doe');
    cy.get('[data-testid="user-2"]').should('have.text', 'Jane Smith');
  });

  it('handles API errors gracefully', () => {
    cy.intercept('GET', ' {
      statusCode: 500,
      body: 'Internal Server Error',
    }).as('getUsersFailed');

    cy.mount(<UserList />);
    cy.wait('@getUsersFailed');
    cy.get('[data-testid="user-list"]').should('be.empty');
  });
});

Mengapa ini berhasil:

• cy.intercept() Simulasi respons API tanpa memukul server nyata.
• delayMs Simulasi latensi jaringan untuk menguji status beban.
• Menguji skema kesalahan memastikan bahwa komponen Anda tidak macet.

Praktik terbaik untuk pengujian berkelanjutan

1. Tes Pemisahan: Gunakan keadaan reset antar tes beforeEach kait.
2. Gunakan perintah khusus: Dengan menambahkan perintah ke cypress/support/commands.js.
3. Hindari logika bersyarat: Jangan gunakan if/else Dalam tes – setiap tes harus dapat diprediksi.
4. Menggunakan perlengkapan: Simpan data yang disimulasikan cypress/fixtures Jaga agar tes tetap bersih.

5. Gunakan atribut data sebagai pemilih

   • contoh: data-testid="email-input" Alih-alih #email atau .input-primary.
   • Mengapa? Nama kelas dan ID berubah; ID tes tidak.

6. Simulasi strategis

   • Pengujian Komponen: Mensimulasikan komponen anak -anak cy.stub().
   • Tes E2E: Mensimulasikan API cy.intercept().

7. Simpan Atom Tes

   • Uji satu perilaku per blok:
     • Tes login yang berhasil.
     • Yang lainnya adalah untuk kegagalan login.

8. Tulis pernyataan yang fleksibel Alih-alih:

   cy.get('button').should('have.class', 'active');

   Menulis:

   cy.get('[data-testid="status-button"]').should('have.attr', 'aria-checked', 'true');

9. Perjalanan Waktu Cypress Cypress memungkinkan pengguna untuk melihat langkah -langkah tes secara intuitif. menggunakan .debug() Jeda dan periksa tes dalam status.

   cy.get('[data-testid="submit-button"]').click().debug();

FAQ: Jawaban Pertanyaan Cypress Anda

T: Bagaimana cara menguji komponen menggunakan react router?

A: Kemasi komponen Anda MemoryRouter Simulasi routing dalam tes:

cy.mount(
  <MemoryRouter>
    <YourComponent />
  </MemoryRouter>
);

T: Dapatkah saya menjalankan tes Cypress dalam pipa CI/CD?

Jawab: Tentu saja! Anda dapat menjalankan header uji di lingkungan seperti operasi github menggunakan perintah (seperti operasi github):

T: Bagaimana cara menjalankan tes secara paralel untuk mempercepat CI/CD?

A: Untuk mempercepat tes, Anda dapat menjalankannya secara paralel dengan perintah berikut:

npx cypress run --parallel

T: Bagaimana cara menguji unggahan file?

A: Anda dapat menguji unggahan file dengan memilih input file tersebut:

cy.get('input[type="file"]').selectFile('path/to/file.txt');

Meringkaskan

Cypress merevolusi pengujian dengan mengintegrasikannya dengan lancar ke dalam alur kerja Anda. Mulailah dengan komponen langsung dan kemudian langkah demi langkah untuk menyelesaikan solusi yang lebih kompleks untuk membangun kepercayaan diri Anda dan menangkap kesalahan sebelum memengaruhi pengguna. Ingat, tujuannya bukan untuk mencapai cakupan uji 100%; Sebaliknya, ini adalah tentang menciptakan tes yang berdampak yang pada akhirnya dapat menghemat waktu Anda dan mencegah sakit kepala di masa depan.