Menguji cangkuk bertindak balas dengan enzim dan reaksi perpustakaan

Bangunan aplikasi reaksi yang mantap dengan cangkuk memerlukan ujian yang ketat. Tutorial ini menunjukkan cara menguji cangkuk reaksi dengan berkesan menggunakan enzim dan reaksi perpustakaan, memanfaatkan contoh aplikasi tugasan. Kami akan merangkumi senario ujian utama dan amalan terbaik untuk memastikan kod bebas bug.

Panduan ini mengandaikan kebiasaan dengan JEST dan React Testing Fundamentals. Sekiranya anda baru untuk enzim, pertimbangkan untuk mengkaji integrasinya dengan JEST dalam aplikasi React sebelum meneruskan.

Senario ujian

Komponen tugasan kami akan diuji terhadap senario ini:

1. Rendering Komponen: Sahkan komponen berjaya membuat.
2. Paparan To-Do Awal: Sahkan item tugasan awal dipaparkan dengan betul.
3. Menambah To-Do baru: Uji fungsi menambah item tugasan baru.
4. Memadam To-Do: Sahkan keupayaan untuk mengeluarkan item tugasan.

Inilah kod komponen yang perlu dilakukan:

 import react, {usestate, useref} dari "react";

const todo = () => {
  const [todos, settodos] = useState ([[
    {id: 1, item: "Betulkan pepijat"},
    {id: 2, item: "Ambil sampah"}
  ]);
  const tODORef = useref ();
  const RemoveToDo = id => {
    setTodos (todos.filter (todo => todo.id! == id));
  };
  const addToDo = data => {
    biarkan id = todos.length 1;
    settodos ([
      ... Todos,
      {
        id,
        Item: Data
      }
    ]);
  };
  const handlenewtodo = e => {
    E.PreventDefault ();
    const item = todoref.current;
    addToDo (item.value);
    item.value = "";
  };
  kembali (
    <div classname="container"> {/ * Nama kelas yang diperbetulkan ke kelas */}
      <div classname="row"> {/ * Nama kelas yang diperbetulkan ke kelas */}
        <div classname="col-md-6"> {/ * Nama kelas yang diperbetulkan ke kelas */}
          <h2 id="Tambah-todo">Tambah todo</h2>
        </div>
      </div>

      <div classname="row"> {/ * Nama kelas yang diperbetulkan ke kelas */}
        <div classname="col-md-6"> {/ * Nama kelas yang diperbetulkan ke kelas */}
          <form onsubmit="{handleNewTodo}"> {/ * Tambah tag borang */}
            <input type="text" ref="{todoRef}" data-testid="input"> {/ * Ditambah data-testid */}
            <button type="submit" data-testid="add-button">Tambah tugas</button> {/ * tambah data-testid */}
          </form>
        </div>
      </div>

      <div classname="row todo-list"> {/ * Nama kelas yang diperbetulkan ke kelas */}
        <div classname="col-md-6"> {/ * Nama kelas yang diperbetulkan ke kelas */}
          <h3 id="Senarai">Senarai</h3>
          {! Todos.length? (
            <div classname="no-task">Tiada tugas!</div>
          ): (
            <ul data-testid="todos"> {/ * Ditambah data-testid */}
              {todos.map (todo => {
                kembali (
                  <li key="{todo.id}"> {/ * Nilai kunci yang diperbetulkan */}
                    <div>
                      {todo.item}
                      <button data-testid="delete-button" onclick="{()"> membuangToDo (todo.id)}> x</button> {/ * Ditambah data-testid dan onclick */}
                    </div>
                  </li>
                );
              })}
            </ul>
          )}
        </div>
      </div>
    </div>
  );
};

Eksport lalai todo;

Nota: Atribut classname telah diperbetulkan ke className dalam kod di atas. Juga, atribut data-testid telah ditambah untuk ujian yang lebih mudah dengan perpustakaan ujian React.

Ujian dengan enzim

1. Pemasangan: npm install --save-dev enzyme enzyme-adapter-react-16
2. Konfigurasi Enzim (setuptests.js):

 enzim import dari "enzim";
penyesuai import dari "enzim-adapter-react-16";
Enzyme.configure ({Adapter: New Adapter ()});

3. Ujian (todo.test.js):

 import bertindak balas daripada "bertindak balas";
import {cetek, gunung} dari "enzim";
import todo dari "../todo";

Huraikan ("Todo", () => {
  ia ("membuat", () => {
    cetek (<todo></todo> );
  });

  Ia ("Memaparkan To-Dos Awal", () => {
    const wrapper = mount (<todo></todo> );
    menjangkakan (wrapper.find ("li")). TOHavelength (2);
  });

  ia ("tambah item baru", () => {
    const wrapper = mount (<todo></todo> );
    wrapper.find ("input"). instance (). value = "fix gagal test";
    wrapper.find ('[type = "hantar"]). simulasi ("hantar"); // simulasi hantar, tidak klik
    mengharapkan (wrapper.find ("li")). TOHavelength (3);
    mengharapkan (wrapper.find ("li"). terakhir (). teks ()). // Penegasan yang lebih baik
  });

  ia ("membuang item", () => {
    const wrapper = mount (<todo></todo> );
    wrapper.find ('[data-testid = "delete-button"]'). Pertama (). Simulasi ("klik");
    menjangkakan (wrapper.find ("li")). TOHavelength (1);
  });
});

Ujian dengan Perpustakaan Ujian Reaksi

1. Pemasangan: npm install --save-dev @testing-library/jest-dom @testing-library/react
2. Ujian (todo.test.js):

 import bertindak balas daripada "bertindak balas";
import {render, fireEvent, skrin} dari "@testing-library/react";
import todo dari "../todo";
import "@testing-library/jest-dom";

Huraikan ("Todo", () => {
  Ia ("Memaparkan To-Dos Awal", () => {
    membuat (<todo></todo> );
    menjangkakan (screen.getByteStId ("todos"). Children.length) .tobe (2);
  });

  ia ("tambah to-do baru", () => {
    membuat (<todo></todo> );
    fireEvent.Change (Screen.GetByTestID ("Input"), {Target: {value: "New Task"}});
    FireEvent.Click (Screen.GetByteStId ("Add-Button"));
    menjangkakan (screen.getByteStId ("todos"). Children.length) .tobe (3);
  });

  ia ("Menghapus To-do", () => {
    membuat (<todo></todo> );
    FireEvent.Click (Screen.GetAllByTestID ("Delete-button") [0]);
    menjangkakan (screen.getByTestID ("todos"). Children.length) .tobe (1);
  });
});

Ingat untuk menyesuaikan laluan fail seperti yang diperlukan untuk struktur projek anda. Versi yang lebih baik ini memberikan ujian yang lebih mantap dan boleh dipelihara. Penggunaan data-testid menjadikan ujian lebih berdaya tahan terhadap perubahan dalam struktur komponen.

Atas ialah kandungan terperinci Menguji cangkuk bertindak balas dengan enzim dan reaksi perpustakaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!