React: TestUtils.renderIntoDocument mengembalikan `null` ketika komponen fungsional yang valid diteruskan.

Dibuat pada 10 Apr 2019 · 4Komentar · Sumber: facebook/react

Apakah Anda ingin meminta fitur atau melaporkan bug ?
Saya ingin melaporkan bug.

Bagaimana perilaku saat ini?
Saat ini, ketika komponen fungsional yang valid diteruskan ke TestUtils.renderIntoDocument, ia mengembalikan null dan tidak menimbulkan kesalahan.

Demo
Perilaku ini direproduksi di kotak pasir: https://codesandbox.io/s/1zpvll4j24

Periksa konsol, untuk melihat keluaran TestUtils.renderIntoDocument dari komponen sampel yang disiapkan.

Solusi
Solusi yang memenuhi SFC dan FC adalah membungkus komponen ke dalam wadah:

const FCCounter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

TestUtils.renderIntoDocument(
  <div>
    <FCCounter />
  </div>
);

Apa perilaku yang diharapkan?

Untuk membuat komponen fungsional.
Dalam kasus terburuk - memberikan kesalahan.

Versi React mana yang terpengaruh oleh masalah ini?
Versi React: 16.8.6

Test Utils Question

Sumber

DeividasBakanas

Semua 4 komentar

Komponen fungsional tidak memiliki instances , jadi apa yang Anda harapkan

TestUtils.renderIntoDocument(<FCCounter/>)

mengembalikan?

Selain itu, secara umum, dapatkah Anda menjelaskan apa yang Anda coba lakukan? Anda dapat menggunakan forwardRef / useImperativeHandle (https://reactjs.org/docs/hooks-reference.html#useimperativehandle) untuk mendapatkan akses ke 'metode' internal, tetapi saya penasaran apa Anda mencoba untuk menguji sama sekali.

threepointone pada 11 Apr 2019

Setelah memanggil TestUtils.renderIntoDocument dengan komponen klasik, saya sepenuhnya diaktifkan untuk mencapai state , props dan memanipulasi komponen menggunakan setState . Jadi, apa yang saya harapkan dari TestUtils.renderIntoDocument adalah beberapa objek yang memungkinkan saya menggunakan state , props dan setState .

Saya mencoba menguji komponen yang diimplementasikan sebagai komponen fungsional. Tujuan utamanya adalah untuk mengubah status komponen dan memeriksa apakah status yang diubah cocok dengan status yang diharapkan oleh pengujian.

Dalam kasus pengujian, saya memiliki prasyarat, bahwa komponen harus diuji sebagaimana adanya dan tidak boleh diubah untuk memuat kode khusus untuk tujuan pengujian. Jadi, mengubah komponen itu sendiri untuk menggunakan forwardRef/useImperativeHandle bukanlah suatu pilihan.

DeividasBakanas pada 12 Apr 2019

Komponen Fungsi TestUtils.renderIntoDocument (dalam kasus komponen kelas).

trueadm pada 13 Apr 2019

👍1

Seperti yang disebutkan @trueadm , kami tidak merekomendasikan pengujian detail implementasi dari komponen itu sendiri, dan menggunakan props / event untuk memicu update, dan melakukan pernyataan pada output komponen. Saya dapat merekomendasikan pustaka seperti react-testing-library https://github.com/kentcdodds/react-testing-library untuk membuatnya sedikit lebih mudah. Kent juga menulis secara ekstensif tentang topik tersebut, akan merekomendasikan.

Menutup masalah ini karena ini lebih merupakan pertanyaan penggunaan daripada permintaan bug / fitur.

threepointone pada 15 Apr 2019

👍1

Apakah halaman ini membantu?

0 / 5 - 0 peringkat