Menggunakan Cypress untuk menulis ujian untuk aplikasi React

Ujian akhir-ke-akhir (E2E) mengesahkan aliran aplikasi dari awal hingga akhir. Daripada ujian manual, integrasi berterusan (CI) mengautomasikan proses ini. Tulis kod, simpan, dan biarkan alat memastikan ia tidak memecahkan fungsi sedia ada. Cypress adalah kerangka ujian E2E yang kuat yang memudahkan proses ini, terutamanya untuk perpustakaan JavaScript moden seperti React.

Menyediakan aplikasi ujian

Tutorial ini menggunakan aplikasi Todo sampel. Klon repositori untuk mengikuti:

 klon git [dilindungi e-mel]: kinsomicrote/cypress-react-tutorial.git

Navigasi ke direktori dan pasang kebergantungan:

 CD Cypress-React-Tutorial
Benang memasang

Pasang Cypress:

 Benang Tambah Cypress --deV

Buka Cypress:

 node_modules/.bin/cypress dibuka

Untuk akses yang lebih mudah, tambahkan skrip ini ke package.json :

 "Skrip": {
  "Cypress": "Cypress Open" "
}

Sekarang jalankan yarn cypress untuk membuka Cypress. Mulakan aplikasi React dengan yarn start melihat aplikasi.

Mari buat ujian asas dalam cypress/integration/init.spec.js :

 Huraikan ('Cypress', () => {
  ia ('berfungsi', () => {
    mengharapkan (benar) .to.equal (benar);
  });
});

Ini mengesahkan Cypress berfungsi. Sekarang, mari kita menguji melawat aplikasinya:

 ia ('melawat aplikasi', () => {
  cy.visit ('http: // localhost: 3000');
});

Untuk mengelakkan mengulangi URL, tetapkan URL asas di cypress.json :

 {
  "BaseUrl": "http: // localhost: 3000"
}

Ujian kini boleh dipermudahkan untuk:

 ia ('melawat aplikasi', () => {
  cy.visit ('/');
});

Kawalan borang ujian dan input

Buat cypress/integration/form.spec.js untuk menguji interaksi pengguna.

 terangkan ('bentuk', () => {
  sebelum ini (() => {
    cy.visit ('/');
  });

  ia ('memfokuskan input', () => {
    cy.focused (). harus ('have.class', 'form-control');
  });

  ia ('menerima input', () => {
    const input = "belajar tentang cypress";
    cy.get ('. borang kawalan')
      .type (input)
      .sedan ('mempunyai.value', input);
  });

  Ia ('Memaparkan senarai Todos', () => {
    cy.get ('li'). harus ('mempunyai.length', 2);
  });

  ia ('tambah todo baru', () => {
    const input = "belajar tentang cypress";
    cy.get ('. borang kawalan')
      .type (input)
      .type ('{enter}')
      .get ('li')
      .Sahap ('Have.length', 3);
  });

  ia ('Menghapus todo', () => {
    cy.get ('li')
      .First ()
      .find ('. btn-danger')
      .Click ()
      .get ('li')
      .Sahap ('Have.length', 1);
  });

  Ia ('Menghapus semua Todos', () => {
    cy.get ('li')
      .First ()
      .find ('. btn-danger')
      .Click ()
      .get ('li')
      .First ()
      .find ('. btn-danger')
      .Click ()
      .get ('. Tidak ada tugas')
      .sea ('have.text', 'semua tugas anda selesai. Baik dilakukan!');
  });
});

Ujian ini meliputi fokus input, penerimaan input, kiraan todo awal, menambah todo baru, memadam satu todo, dan memadam semua todos.

Menguji permintaan rangkaian

Permintaan rangkaian menguji memastikan pengambilan data berfungsi dengan betul. Sebagai contoh, menggunakan API tempat pemegang JSON:

 terangkan ('permintaan', () => {
  ia ('memaparkan pengguna rawak dari api', () => {
    cy.request ('https://jsonplaceholder.typicode.com/users')
      .seaould ((response) => {
        menjangkakan (response.status) .to.eq (200);
        mengharapkan (response.body) .to.have.length (10);
        mengharapkan (respons) .to.have.property ('headers');
        mengharapkan (respons) .to.have.property ('durasi');
      });
  });
});

Ini mengesahkan status tindak balas API, panjang data, dan sifat tindak balas.

Ujian menjalankan dari baris arahan

Jalankan ujian Cypress dari terminal:

 NPX Cypress Run

Untuk menjalankan ujian tertentu:

 NPX Cypress Run --Pec "Cypress/Integration/Form.Spec.js"

Ini memberikan ringkasan baris arahan keputusan ujian. Rujuk dokumentasi Cypress untuk pilihan baris arahan yang lebih maju.

Kesimpulan

Cypress memudahkan ujian E2E, menjadikannya mudah dan bermanfaat bagi pemaju. Tutorial ini menunjukkan asas kepada teknik ujian pertengahan, menggalakkan anda untuk meneroka keupayaannya lagi. Ingatlah untuk berunding dengan dokumentasi Cypress untuk ciri -ciri yang lebih canggih dan amalan terbaik.

Atas ialah kandungan terperinci Menggunakan Cypress untuk menulis ujian untuk aplikasi React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!