Bermula dengan Perpustakaan Ujian React

Anda mungkin tertanya -tanya: Perpustakaan Ujian React lain ? Begitu banyak yang telah diliputi oleh CSS-Tricks (sebenarnya, saya telah menyiarkan artikel mengenai Jest dan Enzyme), tidak ada pilihan yang cukup?

Walau bagaimanapun, reaksi pengujian-perpaduan adalah lebih daripada sekadar perpustakaan ujian lain. Ia adalah perpustakaan ujian, ya, tetapi ia dibina atas prinsip asas, yang menjadikannya berbeza dari perpustakaan ujian lain.

Semakin banyak ujian anda mensimulasikan bagaimana perisian digunakan, semakin banyak keyakinan yang dapat mereka bawa.

Ia cuba menguji bagaimana pengguna menggunakan aplikasi anda. Malah, ia dilaksanakan supaya walaupun anda refactor komponen, ujian tidak akan pecah. Saya tahu kami telah berlaku pada satu ketika dalam perjalanan React kami.

Kami akan meluangkan sedikit masa bersama-sama menulis ujian untuk aplikasi yang mudah dilakukan yang saya bina menggunakan reaksi-ujian-perpaduan. Anda boleh mengklon repositori secara tempatan:

 Git Clone https://github.com/kinsomicrote/todoapp-test.git

Jika anda melakukan ini, pasangkan pakej yang diperlukan:

 ## benang
benang add--de react-ujian-library jest-dom

## npm
Pemasangan NPM--Save-Dev React-Testing-Library Jest-dom

Jika anda ingin tahu mengapa Jest ada di sini, kami menggunakannya untuk pernyataan. Buat folder bernama __test__ dalam direktori Src dan buat fail baru bernama App.test.js

Ambil gambar

Ujian Rekod Ujian Snapshot yang dilakukan pada komponen yang diuji sebagai cara untuk melihat secara visual perbezaan antara perubahan.

Apabila kita mula -mula menjalankan ujian ini, kita mengambil gambar pertama penampilan komponen. Jadi ujian pertama pasti akan berlalu, kerana tidak ada gambaran lain untuk membandingkannya dengan menunjukkan bahawa sesuatu gagal. Ia gagal hanya apabila kita membuat perubahan baru kepada komponen dengan menambah elemen, kelas, komponen, atau teks baru. Tambah kandungan yang tidak wujud apabila snapshot dibuat atau apabila kemas kini terakhir dikemas kini terakhir.

Ujian snapshot akan menjadi ujian pertama yang telah kami tulis di sini. Mari buka fail App.test.js dan menjadikannya kelihatan seperti ini:

 Import bertindak balas daripada 'bertindak balas';
import {render, cleanup} dari "react-ujian-library";
import "jest-dom/extend-expect";
aplikasi import dari './app';

aftereach (pembersihan);

ia ("Perlawanan snapshot", () => {
  const {asfragment} = render (<app></app> );
  mengharapkan (asfragment ()). Tomatchsnapshot ();
});

Ini mengimport pakej yang diperlukan untuk menulis dan menjalankan ujian. render digunakan untuk memaparkan komponen yang ingin kami uji. Kami menggunakan cleanup untuk membersihkan kandungan selepas setiap ujian dijalankan - seperti yang anda lihat di garisan afterEach(cleanup) .

Menggunakan asFragment , kami mendapat DocumentFragment komponen render. Kami kemudian mengharapkan ia sepadan dengan gambar yang telah dibuat.

Mari jalankan ujian untuk melihat apa yang berlaku:

 ## benang
Ujian benang

## npm
Ujian NPM

Seperti yang kita ketahui sekarang, jika ini adalah ujian pertama kami, snapshot komponen dicipta dalam folder baru bernama __snapshots__ di dalam direktori __tests__ . Kami sebenarnya akan mendapatkan fail yang dipanggil App.test.js.snap di dalamnya dan ia kelihatan seperti ini:

 // jest snapshot v1, https://goo.gl/fbaqlp

Eksport [`perlawanan snapshot 1`] =`
<documentfragment><div>
    <div>
      <div>
        <h2>
          Tambah todo
        </h2>
      </div>
    </div>

      <div>
        <div>
          </div>
      </div>
      <div>
        <div>

            Tambah tugas

        </div>
      </div>

    <div>
      <div>
        <h3>
          Senarai
        </h3>
        <ul data-test="">
<li>
            <div>
              Beli susu

                X

            </div>
          </li>
          <li>
            <div>
              Tulis tutorial

                X

            </div>
          </li>
        </ul>
</div>
    </div>
  </div>
</documentfragment>
`;

Sekarang, mari kita menguji elemen dan acara DOM

Aplikasi kami mengandungi dua item tugasan yang dipaparkan secara lalai apabila aplikasi pertama dijalankan. Kami ingin memastikan mereka muncul apabila aplikasi pertama berjalan, jadi untuk menguji ini, kita perlu mencari senarai yang tidak teratur (<ul></ul> ) dan periksa panjangnya. Kami mengharapkan panjangnya sama dengan 2 - bilangan item.

 ia ('ia memaparkan item todo lalai', () => {
  const {getByteStid} = render (<app></app> );
  const todolist = getByteStId ('todos-ul');
  menjangkakan (todolist.children.length) .tobe (2);  
});

Kami menggunakan getByTestId dalam coretan kod ini untuk mengekstrak ID ujian dari komponen App . Kemudian kami menetapkan todoList untuk mencari elemen todos-ul . Ini harus kembali 2.

Menggunakan apa yang telah kami pelajari setakat ini, lihat jika anda boleh menulis ujian yang menegaskan bahawa pengguna boleh memasukkan nilai dalam medan input. Berikut adalah tindakan yang perlu anda lakukan:

• Dapatkan medan input
• Tetapkan nilai untuk medan input
• Acara Perubahan Pencetus
• Menegaskan bahawa nilai medan input adalah sama dengan nilai yang anda tetapkan untuknya dalam langkah 2

Jangan mengintip jawapan saya di bawah! Luangkan seberapa banyak masa yang mungkin.

Masih berterusan? Luar Biasa! Saya akan minum secawan kopi dan kembali tidak lama lagi.

Nah, kopi. ☕️

Oh, awak sudah selesai! Anda hebat. Mari bandingkan jawapannya. Tambang kelihatan seperti ini:

 ia ('membolehkan input', () => {
  const {getByteStid, fireEvent} = render (<app></app> );
  biarkan item = 'belajar bertindak balas';
  const TODoInputeLement = getByTestID ('Todo-Input');
  todoinputeLement.Value = item;
  FireEvent.Change (TodoInputeLement);
  menjangkakan (todoinputeLement.value) .tobe ('belajar reaksi');
});

Menggunakan getByTestId , saya dapat mengekstrak ID ujian dalam aplikasi. Kemudian saya membuat pemboleh ubah, tetapkannya ke rentetan "Belajar React", dan menjadikannya nilai medan input. Seterusnya, saya menggunakan ID ujiannya untuk mendapatkan medan input dan mencetuskan peristiwa perubahan selepas menetapkan nilai medan input. Selepas melakukan ini, saya menegaskan bahawa nilai medan input memang "belajar bertindak balas".

Adakah ini konsisten dengan jawapan anda? Jika anda mempunyai kaedah lain, sila tinggalkan komen!

Seterusnya, mari kita uji jika kita boleh menambah item tugasan baru. Kami perlu mendapatkan medan input, butang untuk menambah projek baru, dan senarai yang tidak teratur, kerana ini adalah semua elemen yang diperlukan untuk membuat projek baru.

Kami menetapkan nilai untuk medan input dan kemudian mencetuskan butang klik untuk menambah tugas. Kami boleh melakukan ini dengan menggunakan getByText untuk mendapatkan butang - dengan mencetuskan acara klik pada elemen DOM dengan teks "Tambah Tugas", kita harus dapat menambah item tugasan baru.

Mari kita menegaskan bahawa bilangan elemen kanak -kanak (senarai item) dalam elemen senarai yang tidak teratur adalah sama dengan 3. Ini mengandaikan bahawa tugas lalai masih utuh.

 ia ('tambah item todo baru', () => {
  const {getByText, getByteStid, fireEvent} = render (<app></app> );
  const TODoInputeLement = getByTestID ('Todo-Input');
  const todolist = getByteStId ('todos-ul');
  TodoInputeLement.Value = 'Learn React';
  FireEvent.Change (TodoInputeLement);
  FireEvent.Click (getByText ('tambah tugas'));
  menjangkakan (todolist.children.length) .tobe (3); 
});

Sangat baik, bukan?

Ini hanya satu cara untuk menguji dalam React

Anda boleh mencuba react-ujian-perpustakaan dalam aplikasi React seterusnya. Dokumentasi di gudang sangat terperinci dan - seperti kebanyakan alat - adalah tempat terbaik untuk bermula. Kent C. Dodds membinanya dan terdapat kursus penuh untuk menguji di hadapan tuan-tuan (memerlukan langganan), yang juga meliputi selok-belok pengujian reaksi.

Iaitu, ini hanya sumber ujian untuk React. Sudah tentu terdapat sumber -sumber lain, tetapi diharapkan anda telah melihat beberapa kandungan sekarang dan berminat untuk mencubanya, dan sudah tentu anda juga harus menggunakan sumber yang terbaik untuk projek anda.

Atas ialah kandungan terperinci Bermula dengan Perpustakaan Ujian React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!