Ujian Komponen React untuk Manusia

Kerajinan ujian komponen React yang berkesan harus intuitif, mudah, dan mudah dipelihara. Walau bagaimanapun, ekosistem perpustakaan ujian semasa sering jatuh pendek, menghalang pemaju daripada menulis secara konsisten ujian JavaScript yang mantap. Menguji komponen React dan DOM sering memerlukan pembungkus peringkat tinggi di sekitar pelari ujian popular seperti Jest atau Mocha.

Cabaran: ujian membosankan dan mengelirukan

Kaedah ujian semasa sering membuktikan membosankan dan mengelirukan. Gaya chquery seperti jquery untuk mengekspresikan logik ujian adalah rumit dan tidak sejajar dengan seni bina komponen React. Malah kod yang boleh dibaca, seperti itu menggunakan enzim, boleh menjadi terlalu jelas:

 menjangkakan (screen.find (". Lihat"). HasClass ("Technologies")).
menjangkakan (screen.find ("H3"). Text ()). Toequal ("Teknologi:");
menjangkakan (screen.find ("ul"). kanak -kanak ()). to.have.lengthof (4);
menjangkakan (screen.contains ([
  // ...
]). to.equal (benar);
menjangkakan (screen.find ("butang"). teks ()). Toequal ("belakang");
menjangkakan (screen.find ("butang"). HasClass ("kecil")). to.equal (true);

Ini sepadan dengan struktur DOM yang agak mudah:

<div classname="view technologies">
  <h3 id="Teknologi">Teknologi:</h3>
  <ul>
<li>JavaScript</li>
<li> Reactjs</li>
<li> Nodejs</li>
<li> Webpack</li>
</ul>
  <button classname="small">Kembali</button>
</div>

Menguji komponen yang lebih kompleks menguatkan isu -isu ini, menjadikan proses lebih sukar dikawal. Putus antara prinsip React untuk menjana HTML dan pendekatan ujian membawa kepada ujian yang tidak cekap dan sukar untuk dikekalkan. Rantaian JavaScript mudah tidak mencukupi untuk mengekalkan jangka panjang.

Dua masalah utama muncul:

• Pendekatan Ujian Komponen Komponen: Cara Menulis Ujian Berkesan Terjejas dengan Tingkah Laku Komponen.
• Meminimumkan redundansi: Bagaimana untuk menghapuskan kod yang tidak perlu dan meningkatkan kebolehbacaan ujian.

Mari kita atasi ini sebelum meneroka penyelesaian praktikal.

Pendekatan yang difokuskan untuk menguji ujian komponen

Pertimbangkan komponen reaksi asas:

 fungsi selamat datang (props) {
  kembali<h1 id="Helo-props-name"> Helo, {props.name}</h1> ;
}

Fungsi ini menerima props dan mengembalikan nod DOM menggunakan JSX. Oleh kerana komponen pada dasarnya berfungsi, menguji mereka melibatkan mengesahkan kelakuan fungsi: bagaimana argumen mempengaruhi hasil yang dikembalikan. Untuk komponen React, ini diterjemahkan untuk menubuhkan props dan mengesahkan DOM yang diberikan. Interaksi Pengguna (Klik, Mouseovers, dan lain -lain) yang mengubah suai UI juga perlu diprogramkan secara programatik.

Meningkatkan kebolehbacaan ujian: corak atur-act-asert

Ujian yang jelas dan boleh dibaca adalah penting. Ini dicapai dengan kata -kata ringkas dan struktur yang konsisten. Corak Arang-Act-Assert (AAA) sesuai:

1. Susun: Sediakan alat komponen.
2. ACT: Membuat komponen dan mencetuskan interaksi pengguna.
3. Menegaskan: Sahkan hasil yang dijangkakan berdasarkan markup komponen.

Contoh:

 ia ("harus klik butang besar", () => {
  // Susun
  props.size = "besar";

  // bertindak
  const component = mount (hantar);
  simulasi (komponen, {type: "klik"});

  // menegaskan
  mengharapkan (komponen, "mempunyai kelas", "diklik");
});

Untuk ujian yang lebih mudah, fasa boleh digabungkan:

 ia ("harus diberikan dengan teks tersuai", () => {
  mengharapkan (hantar, "apabila dipasang", "mempunyai teks", "hantar");
});

Meningkatkan amalan ujian semasa

Contoh -contoh sebelumnya, sementara bunyi konseptual, tidak mudah dicapai dengan alat standard. Pertimbangkan pendekatan yang lebih biasa ini:

 ia ("harus memaparkan pandangan teknologi", () => {
  const container = document.createElement ("div");
  document.body.appendchild (kontena);

  bertindak (() => {
    Reactdom.render (<profilecard></profilecard> , bekas);
  });

  butang const = container.QuerySelector ("butang");

  bertindak (() => {
    button.disPatCheVent (window baru.mouseEvent ("klik", {Bubbles: true}));
  });

  Const Butiran = Container.QuerySelector (". Butiran");

  menjangkakan (details.classlist.contains ("teknologi")). Tobe (benar);
});

Bandingkan ini dengan versi yang lebih abstrak:

 ia ("harus memaparkan pandangan teknologi", () => {
  Const Component = Mount (<profilecard></profilecard> );

  simulasi (komponen, {type: "klik", sasaran: "butang"});

  mengharapkan (komponen, "Queried for id id", "butiran", "untuk mempunyai kelas", "teknologi");
});

Ini lebih bersih dan lebih mudah dibaca. Tahap abstraksi ini boleh dicapai dengan yang tidak dijangka .

Ujian dengan tidak dijangka

Tidak dijangka adalah perpustakaan pernyataan yang boleh dipertingkatkan dengan pelbagai kerangka ujian. Sistem plugin dan sintaksnya memudahkan ujian komponen React. Kami akan memberi tumpuan kepada penggunaan dan contoh daripada menyelidiki secara mendalam ke dalam kerja dalaman yang tidak dijangka.

Contoh: Komponen kad profil

Kami akan menguji komponen ProfileCard (kod yang ditinggalkan untuk keringkasan, tetapi boleh didapati dalam repositori GitHub yang dirujuk).

Menyediakan projek

Untuk mengikuti, klon repositori GitHub dan ikuti arahan untuk menubuhkan projek dan menjalankan ujian.

Ujian komponen

Ujian (dalam src/components/ProfileCard/ProfileCard.test.js ) menggunakan corak AAA:

1. Persediaan Prop: beforeEach menetapkan prop lalai.

 sebelum ini (() => {
  props = {
    Data: {
      Nama: "Justin Case",
      Catatan: 45,
      CreationDate: "01.01.2021",
    },
  };
});

2. Kes Ujian Khusus: Contohnya termasuk ujian untuk ikon "dalam talian", teks bio, pandangan teknologi (dengan dan tanpa data), paparan lokasi, pelaksanaan fungsi panggilan balik, dan membuat prop lalai. Setiap kes ujian dengan jelas menunjukkan corak atrang-act-asert. (Kes -kes ujian terperinci yang ditinggalkan untuk keringkasan, tetapi boleh didapati di repo github).

3. Ujian Running: Semua ujian dilaksanakan dengan yarn test .

Kesimpulan

Contoh ini mempamerkan pendekatan yang lebih berkesan untuk menguji ujian komponen. Dengan melihat komponen sebagai fungsi dan menggunakan corak AAA, anda boleh membuat lebih banyak ujian yang boleh dipelihara dan boleh dibaca. Pilihan perpustakaan ujian harus dipandu oleh keupayaannya untuk mengendalikan perbandingan komponen dan perbandingan DOM dengan berkesan; Tidak dijangka adalah pesaing yang kuat dalam hal ini. Terokai repositori GitHub yang disediakan untuk pemahaman yang lengkap dan percubaan selanjutnya.

Atas ialah kandungan terperinci Ujian Komponen React untuk Manusia. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!