Panduan untuk Menguji Komponen Reaksi

Takeaways Key

Komponen React dapat diuji secara semulajadi kerana komposisi dan hubungan objek mereka, dan mereka tidak bergantung pada warisan untuk membina komponen yang boleh diguna semula, menjadikan ujian lebih mudah. ​​
Utiliti penahan cetek dalam React membolehkan ujian unit komponen tunggal secara berasingan, tanpa memerlukan DOM, membolehkan ujian yang cepat dan terfokus.
Sintaks JSX dalam React membolehkan lulus dalam pelbagai jenis JavaScript, seperti boolean dan panggil balik, memudahkan ujian komponen di negeri -negeri yang berbeza.
• Untuk menguji komponen yang saling berkaitan atau bergantung kepada komponen lain, ujian unit harus memberi tumpuan kepada output dan interaksi komponen, dan bukannya butiran pelaksanaannya.
• alat seperti JEST dan enzim disyorkan untuk menguji komponen reaksi, menyediakan ciri -ciri berguna seperti "rendering cetek" dan fungsi mengejek untuk membuat senario ujian yang realistik.
• React adalah rangka kerja yang telah membuat kemajuan dalam komuniti pemaju JavaScript. React mempunyai rangka kerja komposisi yang kuat untuk mereka bentuk komponen. Komponen React adalah bit kod yang boleh diguna semula yang boleh anda gunakan dalam aplikasi web anda.

Komponen React tidak digabungkan dengan ketat dari DOM, tetapi betapa mudahnya mereka ujian unit? Dalam hal ini, mari kita meneroka apa yang diperlukan untuk menguji komponen reaksi unit. Saya akan menunjukkan proses pemikiran untuk membuat komponen anda boleh diuji.

Perlu diingat, saya hanya bercakap tentang ujian unit, yang merupakan ujian khas. .

Dengan ujian unit, saya berminat dengan dua perkara: maklum balas yang cepat dan leher. Dengan ini, saya dapat melangkah melalui perubahan dengan keyakinan dan kualiti kod yang tinggi. Ini memberi anda tahap jaminan bahawa komponen React anda tidak akan mendarat mati pada penyemak imbas. Mampu mendapatkan maklum balas yang baik pada kadar yang cepat memberikan anda kelebihan daya saing - yang anda ingin simpan dalam pembangunan perisian dunia yang tangkas hari ini.

Untuk demo, mari kita buat senarai kera yang hebat, yang boleh ditapis melalui kotak semak. Anda boleh mencari keseluruhan codebase di GitHub. Demi keringkasan, saya akan menunjukkan hanya sampel kod yang menarik. Artikel ini menganggap tahap pengetahuan pengetahuan dengan komponen React.

Jika anda pergi memuat turun dan menjalankan kod sampel demo, anda akan melihat halaman seperti ini:

Tulis komponen yang boleh diuji

Dalam React, pendekatan yang baik adalah untuk memulakan dengan hierarki komponen. Prinsip tanggungjawab tunggal datang ke fikiran ketika membina setiap komponen individu. React Components Gunakan komposisi objek dan hubungan.

Untuk senarai kera yang hebat, sebagai contoh, saya mempunyai pendekatan ini:

FilterableGreatApeList
|_ GreatApeSearchBar
|_ GreatApeList
   |_ GreatApeRow

Lihatlah bagaimana senarai kera yang hebat mempunyai banyak baris kera yang hebat dengan data. Komponen React menggunakan model data komposisi ini, dan ia juga boleh diuji.

Dalam komponen React, elakkan menggunakan warisan untuk membina komponen yang boleh diguna semula. Jika anda datang dari latar belakang pengaturcaraan berorientasikan objek klasik, ingatlah ini. Komponen React tidak tahu anak -anak mereka lebih awal daripada masa. Ujian komponen yang turun dari rantai nenek moyang yang panjang boleh menjadi mimpi ngeri.

Saya akan membiarkan anda meneroka penapis yang boleh ditapis sendiri. Ia adalah komponen bertindak balas dengan dua komponen berasingan yang menarik di sini. Jangan ragu untuk meneroka ujian unit yang datang dengannya.

Untuk membina Greatapesearchbar yang boleh diuji, misalnya, lakukan ini:

<span>class GreatApeSearchBar extends Component {
</span>  <span>constructor(props) {
</span>    <span>super(props);
</span>
    <span>this.handleShowExtantOnlyChange = this.handleShowExtantOnlyChange.bind(this);
</span>  <span>}
</span>
  <span>handleShowExtantOnlyChange(e) {
</span>    <span>this.props.onShowExtantOnlyInput(e.target.checked);
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return(
</span>      <span><span><span><form</span>></span>
</span><span>        <span><span><input</span>
</span></span><span>          <span>id<span>="GreatApeSearchBar-showExtantOnly"</span>
</span></span><span>          <span>type<span>="checkbox"</span>
</span></span><span>          <span>checked<span>={this.props.showExtantOnly}</span>
</span></span><span>          <span>onChange<span>={this.handleShowExtantOnlyChange}</span>
</span></span><span>        <span>/></span>
</span><span>
</span><span>        <span><span><label</span> htmlFor<span>="GreatApeSearchBar-showExtantOnly"</span>></span>Only show extant species<span><span></label</span>></span>
</span><span>      <span><span></form</span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Komponen ini mempunyai kotak semak dengan label dan wayar sehingga acara klik. Pendekatan ini mungkin sudah terlalu biasa dengan anda, yang merupakan perkara yang sangat baik.

Perhatikan bahawa dengan reaksi, komponen yang boleh diuji datang secara percuma, terus dari kotak. Tidak ada yang istimewa di sini - pengendali acara, JSX, dan kaedah render.

Komponen React Next dalam hierarki adalah The Greatapelist, dan ia kelihatan seperti ini:

<span>class GreatApeList extends Component {
</span>  <span>render() {
</span>    <span>let rows = [];
</span>
    <span>this.props.apes.forEach((ape) => {
</span>      <span>if (!this.props.showExtantOnly) {
</span>        rows<span>.push(<span><span><GreatApeRow</span> key<span>={ape.name}</span> ape<span>={ape}</span> /></span>);
</span>
        <span>return;
</span>      <span>}
</span>
      <span>if (ape.isExtant) {
</span>        rows<span>.push(<span><span><GreatApeRow</span> key<span>={ape.name}</span> ape<span>={ape}</span> /></span>);
</span>      <span>}
</span>    <span>});
</span>
    <span>return (
</span>      <span><span><span><div</span>></span>
</span><span>        {rows}
</span><span>      <span><span></div</span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Ia adalah komponen React yang mempunyai komponen Greataperow dan ia menggunakan komposisi objek. Ini adalah model komposisi yang paling kuat di tempat kerja. Perhatikan kekurangan warisan apabila anda membina komponen yang boleh diguna semula tetapi boleh diuji.

Dalam pengaturcaraan, komposisi objek adalah corak reka bentuk yang membolehkan unsur-unsur yang didorong data. Untuk memikirkannya dengan cara yang lain, seorang ahli greatapel mempunyai banyak objek yang hebat. Ini hubungan ini antara komponen UI yang memacu reka bentuk. Komponen React mempunyai minda ini dibina. Cara ini melihat elemen UI membolehkan anda menulis beberapa ujian unit yang bagus.

di sini, anda menyemak bendera this.props.showextantOnly yang berasal dari kotak semak. Harta showextantonly ini ditetapkan melalui pengendali acara di GreatapesearchBar.

Untuk ujian unit, bagaimana anda menguji komponen reaksi ujian yang bergantung kepada komponen lain? Bagaimana dengan komponen yang saling berkaitan? Ini adalah soalan -soalan yang hebat untuk diingat ketika kita dapat menguji tidak lama lagi. Komponen React mungkin mempunyai rahsia yang boleh dibuka.

Buat masa ini, mari kita lihat The Greataperow, yang menempatkan data kera yang hebat:

<span>class GreatApeRow extends Component {
</span>  <span>render() {
</span>    <span>return (
</span>      <span><span><span><div</span>></span>
</span><span>        <span><span><img</span>
</span></span><span>          <span>className<span>="GreatApeRow-image"</span>
</span></span><span>          <span>src<span>={this.props.ape.image}</span>
</span></span><span>          <span>alt<span>={this.props.ape.name}</span>
</span></span><span>        <span>/></span>
</span><span>
</span><span>        <span><span><p</span> className<span>="GreatApeRow-detail"</span>></span>
</span><span>          <span><span><b</span>></span>Species:<span><span></b</span>></span> {this.props.ape.name}
</span><span>        <span><span></p</span>></span>
</span><span>
</span><span>        <span><span><p</span> className<span>="GreatApeRow-detail"</span>></span>
</span><span>          <span><span><b</span>></span>Age:<span><span></b</span>></span> {this.props.ape.age}
</span><span>        <span><span></p</span>></span>
</span><span>      <span><span></div</span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Dengan komponen React, ia praktikal untuk mengasingkan setiap elemen UI dengan fokus laser pada satu kebimbangan. Ini mempunyai kelebihan utama ketika datang ke ujian unit. Selagi anda berpegang pada corak reka bentuk ini, anda akan mendapati ia lancar untuk menulis ujian unit.

Ujian utiliti

mari kita rekap kebimbangan terbesar kita ketika datang untuk menguji komponen React. Bagaimanakah saya menguji satu komponen tunggal secara berasingan? Nah, ternyata, ada utiliti bagus yang membolehkan anda melakukannya.

Penggerak cetek dalam React membolehkan anda membuat komponen satu tahap dalam. Dari ini, anda boleh menegaskan fakta tentang apa yang dilakukan oleh kaedah render. Apa yang luar biasa ialah ia tidak memerlukan dom.

menggunakan ES6, anda menggunakannya seperti ini:

FilterableGreatApeList
|_ GreatApeSearchBar
|_ GreatApeList
   |_ GreatApeRow

Agar ujian unit berjalan pantas, anda memerlukan cara untuk menguji komponen secara berasingan. Dengan cara ini, anda boleh memberi tumpuan kepada satu masalah, mengujinya, dan beralih kepada kebimbangan seterusnya. Ini menjadi memberi kuasa apabila penyelesaiannya berkembang dan anda dapat refactor mengikut kehendak - tinggal dekat dengan kod, membuat perubahan pesat, dan mendapat jaminan ia akan berfungsi dalam penyemak imbas.

Satu kelebihan pendekatan ini ialah anda berfikir lebih baik mengenai kod tersebut. Ini menghasilkan penyelesaian terbaik yang berkaitan dengan masalah yang dihadapi. Saya dapati ia membebaskan apabila anda tidak dirantai ke satu ton gangguan. Otak manusia melakukan pekerjaan yang mengerikan dalam menangani lebih daripada satu masalah pada satu masa.

satu -satunya soalan yang tersisa adalah, sejauh mana utiliti kecil ini membawa kita dengan komponen reaksi?

meletakkan semuanya bersama

Lihatlah Greatapelist, sebagai contoh. Apakah kebimbangan utama yang anda cuba selesaikan? Komponen ini menunjukkan kepada anda senarai kera yang hebat berdasarkan penapis.

Ujian unit yang berkesan adalah lulus dalam senarai dan periksa fakta tentang apa yang dilakukan oleh komponen React ini. Kami mahu memastikan ia menapis kera besar berdasarkan bendera.

satu pendekatan adalah melakukan ini:

<span>class GreatApeSearchBar extends Component {
</span>  <span>constructor(props) {
</span>    <span>super(props);
</span>
    <span>this.handleShowExtantOnlyChange = this.handleShowExtantOnlyChange.bind(this);
</span>  <span>}
</span>
  <span>handleShowExtantOnlyChange(e) {
</span>    <span>this.props.onShowExtantOnlyInput(e.target.checked);
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return(
</span>      <span><span><span><form</span>></span>
</span><span>        <span><span><input</span>
</span></span><span>          <span>id<span>="GreatApeSearchBar-showExtantOnly"</span>
</span></span><span>          <span>type<span>="checkbox"</span>
</span></span><span>          <span>checked<span>={this.props.showExtantOnly}</span>
</span></span><span>          <span>onChange<span>={this.handleShowExtantOnlyChange}</span>
</span></span><span>        <span>/></span>
</span><span>
</span><span>        <span><span><label</span> htmlFor<span>="GreatApeSearchBar-showExtantOnly"</span>></span>Only show extant species<span><span></label</span>></span>
</span><span>      <span><span></form</span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Perhatikan bahawa saya menguji komponen React menggunakan jest. Untuk lebih lanjut mengenai ini, lihat "Cara Menguji Komponen Reaksi Menggunakan Jest".

Dalam JSX, lihatlah showextantonly = {true}. Sintaks JSX membolehkan anda menetapkan keadaan ke komponen React anda. Ini membuka banyak cara untuk komponen ujian unit yang diberikan keadaan tertentu. JSX memahami jenis JavaScript asas, jadi bendera sebenar ditetapkan sebagai boolean.

dengan senarai keluar dari jalan, bagaimana pula dengan GreatapesearchBar? Ia mempunyai pengendali acara ini dalam harta Onchange yang mungkin menarik.

satu ujian unit yang baik adalah melakukan ini:

<span>class GreatApeList extends Component {
</span>  <span>render() {
</span>    <span>let rows = [];
</span>
    <span>this.props.apes.forEach((ape) => {
</span>      <span>if (!this.props.showExtantOnly) {
</span>        rows<span>.push(<span><span><GreatApeRow</span> key<span>={ape.name}</span> ape<span>={ape}</span> /></span>);
</span>
        <span>return;
</span>      <span>}
</span>
      <span>if (ape.isExtant) {
</span>        rows<span>.push(<span><span><GreatApeRow</span> key<span>={ape.name}</span> ape<span>={ape}</span> /></span>);
</span>      <span>}
</span>    <span>});
</span>
    <span>return (
</span>      <span><span><span><div</span>></span>
</span><span>        {rows}
</span><span>      <span><span></div</span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Untuk mengendalikan dan menguji peristiwa, anda menggunakan kaedah rendering cetek yang sama. Kaedah GetRenderOutput berguna untuk mengikat fungsi panggil balik kepada komponen dengan peristiwa. Di sini, harta onshowextantonLyInput akan diberikan fungsi onchange callback.

Pada ujian unit yang lebih remeh, bagaimana dengan komponen Greataperow React? Ia memaparkan maklumat APE yang hebat menggunakan tag HTML. Ternyata, anda boleh menggunakan penghantar cetek untuk menguji komponen ini juga.

Sebagai contoh, mari kita pastikan kita membuat imej:

<span>class GreatApeRow extends Component {
</span>  <span>render() {
</span>    <span>return (
</span>      <span><span><span><div</span>></span>
</span><span>        <span><span><img</span>
</span></span><span>          <span>className<span>="GreatApeRow-image"</span>
</span></span><span>          <span>src<span>={this.props.ape.image}</span>
</span></span><span>          <span>alt<span>={this.props.ape.name}</span>
</span></span><span>        <span>/></span>
</span><span>
</span><span>        <span><span><p</span> className<span>="GreatApeRow-detail"</span>></span>
</span><span>          <span><span><b</span>></span>Species:<span><span></b</span>></span> {this.props.ape.name}
</span><span>        <span><span></p</span>></span>
</span><span>
</span><span>        <span><span><p</span> className<span>="GreatApeRow-detail"</span>></span>
</span><span>          <span><span><b</span>></span>Age:<span><span></b</span>></span> {this.props.ape.age}
</span><span>        <span><span></p</span>></span>
</span><span>      <span><span></div</span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Dengan komponen React, semuanya berpusat di sekitar kaedah render. Ini menjadikannya agak intuitif untuk mengetahui dengan tepat apa yang anda perlukan untuk menguji. Penggerak cetek menjadikannya supaya anda dapat memberi tumpuan kepada komponen tunggal sambil menghilangkan bunyi bising.

Kesimpulan

Seperti yang ditunjukkan, komponen React sangat boleh diuji. Tidak ada alasan untuk melepaskan ujian unit yang baik untuk komponen anda.

Perkara yang baik ialah JSX berfungsi untuk anda dalam setiap ujian individu, bukan terhadap anda. Dengan JSX, anda boleh lulus dalam booleans, panggilan balik, atau apa sahaja yang anda perlukan. Ingatlah ini semasa anda menceburkan diri ke dalam komponen reaksi ujian unit sendiri.

Utiliti Ujian Renderer Cetek memberikan anda semua yang anda perlukan untuk ujian unit yang baik. Ia hanya menjadikan satu tahap mendalam dan membolehkan anda menguji secara berasingan. Anda tidak peduli dengan mana -mana anak sewenang -wenang dalam hierarki yang mungkin memecahkan ujian unit anda.

Dengan alat jest, saya suka bagaimana ia memberi anda maklum balas hanya pada fail tertentu yang anda ubah. Ini memendekkan gelung maklum balas dan menambah fokus laser. Saya harap anda melihat betapa berharganya ini apabila anda menangani beberapa masalah yang sukar.

Soalan Lazim (Soalan Lazim) Mengenai Ujian Komponen React

Apakah amalan terbaik untuk menguji komponen React? Ini menjadikannya lebih mudah untuk mengenal pasti dan membetulkan isu -isu. Juga, penting untuk menguji output komponen, bukan butiran pelaksanaannya. Ini bermakna memeriksa apa yang pengguna melihat dan berinteraksi dengan, bukan bagaimana komponen mencapai itu. Akhir sekali, gunakan alat seperti jest dan enzim yang direka khusus untuk menguji komponen reaksi. Mereka menyediakan ciri -ciri berguna seperti "rendering cetek" yang boleh menjadikan ujian anda lebih cekap dan berkesan. Dan ia sangat sesuai untuk menguji komponen reaksi. Untuk menggunakan jest, anda perlu memasangnya dalam projek anda menggunakan npm atau benang. Kemudian, anda boleh menulis ujian menggunakan fungsi dan fungsi IT yang disediakan oleh JEST. Di dalam fungsi IT, anda boleh menggunakan mengharapkan untuk menegaskan bahawa syarat -syarat tertentu dipenuhi. Jest juga menyediakan fungsi mengejek untuk membuat fungsi mengejek, yang boleh berguna untuk menguji bagaimana komponen anda berinteraksi dengan bahagian lain aplikasi anda. > Enzim adalah utiliti ujian JavaScript untuk React yang menjadikannya lebih mudah untuk menguji komponen anda. Ia menyediakan fungsi untuk menjadikan komponen dengan cara yang berbeza, termasuk "rendering cetek" yang hanya menjadikan komponen itu sendiri tanpa komponen anaknya. Ini boleh menjadikan ujian anda lebih cepat dan lebih fokus. Enzim juga menyediakan fungsi untuk mensimulasikan interaksi pengguna seperti mengklik butang, dan untuk memeriksa output komponen anda.

Bagaimana saya boleh menguji interaksi pengguna dalam komponen React saya?

Menguji interaksi pengguna dalam komponen React melibatkan mensimulasikan tindakan pengguna dan memeriksa bahawa komponen bertindak balas dengan betul. Ini boleh dilakukan menggunakan fungsi simulasi yang disediakan oleh enzim. Sebagai contoh, anda boleh mensimulasikan peristiwa klik pada butang dan kemudian periksa bahawa keadaan atau prop komponen telah berubah seperti yang diharapkan. Ia juga penting untuk menguji bahawa komponen anda mengendalikan input pengguna dengan betul, contohnya dengan menyemak bahawa borang mengemukakan data yang betul apabila pengguna mengisi dan mengklik butang hantar. boleh diakses?

Memastikan kebolehcapaian dalam komponen React anda melibatkan amalan terbaik berikut untuk reka bentuk web yang boleh diakses, seperti menggunakan HTML semantik, menyediakan teks alternatif untuk imej, dan memastikan bahawa komponen anda boleh digunakan dengan papan kekunci. Anda juga boleh menggunakan alat seperti jest-axe, plugin jest untuk menguji kebolehcapaian, untuk memeriksa komponen anda secara automatik untuk isu kebolehaksesan biasa. Di samping itu, penting untuk menguji komponen anda dengan pembaca skrin dan teknologi bantuan lain untuk memastikan bahawa mereka benar -benar boleh diakses. Komponen React anda boleh dilakukan dengan menggunakan Profiler React, alat yang mengukur seberapa kerap aplikasi React membuat dan apakah "kos" rendering. Ini dapat membantu anda mengenal pasti komponen yang terlalu kerap atau mengambil terlalu lama untuk memberi, yang dapat melambatkan permohonan anda. Anda juga boleh menggunakan alat penyemak imbas seperti Panel Prestasi Chrome Devtools untuk mengukur prestasi keseluruhan aplikasi anda, termasuk faktor seperti permintaan rangkaian dan masa pelaksanaan JavaScript. >

Menguji komponen React anda dengan alat yang berbeza boleh dilakukan menggunakan fungsi setProps yang disediakan oleh enzim. Ini membolehkan anda menukar prop komponen selepas ia diberikan, dan kemudian periksa bahawa ia bertindak balas dengan betul. Sebagai contoh, anda mungkin menguji bahawa komponen memaparkan teks yang betul apabila diberi alat teks yang berbeza, atau ia mengendalikan alat pilihan pilihan dengan betul. Menguji komponen React anda dalam pelayar yang berbeza boleh dilakukan menggunakan alat seperti BrowserStack atau Labs Sauce. Alat ini membolehkan anda menjalankan ujian anda dalam pelayar sebenar pada peranti sebenar, yang dapat membantu anda menangkap pepijat khusus pelayar. Ia juga penting untuk menguji komponen anda secara manual dalam pelayar yang berbeza, kerana ujian automatik kadang -kadang boleh terlepas masalah visual atau masalah kebolehgunaan.

Bagaimanakah saya boleh menguji komponen React saya dengan saiz skrin yang berbeza? Ini membolehkan anda mensimulasikan saiz dan resolusi skrin yang berbeza, dan periksa bahawa komponen anda kelihatan dan berfungsi dengan betul pada mereka. Anda juga boleh menggunakan alat seperti BrowserStack atau Makmal Sauc Komponen dengan peranan pengguna yang berbeza melibatkan mensimulasikan tindakan pelbagai jenis pengguna, dan memeriksa komponen anda bertindak balas dengan betul. Sebagai contoh, anda mungkin menguji bahawa ciri-ciri tertentu hanya tersedia untuk pengguna log masuk, atau pengguna admin melihat antara muka yang berbeza daripada pengguna biasa. Ini boleh dilakukan menggunakan fungsi simulasi yang disediakan oleh enzim, dan dengan menyediakan ujian anda untuk menggunakan peranan pengguna yang berbeza.

Atas ialah kandungan terperinci Panduan untuk Menguji Komponen Reaksi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!