Bagaimana cara menguji gaya di dalam kelas CSS untuk komponen React menggunakan Jest dan Enzyme?

Pertimbangkan dalam CSS,

.content
{
    width:500px;
    box-sizing: border-box;
}

Saya telah menambahkan kelas css ini di dalam komponen reaksi sebagai berikut

const Banner = () => {
   return (<div className="content">This is message content</div>);
}

Bagaimana cara menulis kasus uji lelucon dan enzim untuk memastikan 'ukuran kotak' dengan 'kotak batas' diterapkan dengan benar?

Catatan: Saya bisa menulis kasus uji untuk memastikan kelas ".content" ditambahkan ke elemen ini. Tapi sebenarnya, saya perlu menulis test case untuk memastikan nilai dalam 'ukuran kotak'.


reactjs jestjs enzyme
person BALA MURUGAN    schedule 26.12.2019    source sumber

Jawaban (2)


arrow_upward
2
arrow_downward

Saya tidak yakin bagaimana cara memperbaiki masalah Anda, namun perlu diingat bahwa tes Anda tidak akan mencakup

* {
  box-sizing: border-box;
}

jika Anda akan mendefinisikannya di suatu tempat juga.

Dari sudut pandang saya, tidak masuk akal untuk menguji gaya, karena kita tidak dapat menjamin dari perspektif pengujian bahwa elemen akan terlihat seperti yang kita inginkan. Jadi Anda tetap perlu membuka browser dan memeriksa elemen Anda berfungsi dengan baik, tetapi Anda menulis tes untuk menghindarinya.

person Krystian Sztadhaus    schedule 26.12.2019

arrow_upward
0
arrow_downward

Dengan menambahkan kode ini ke file Banner.test.js, ia akan memeriksa apakah className yang dipanggil content memiliki properti gaya sebaris untuk box-sizing dan apakah sama dengan border-box atau tidak. Tapi itu hanya akan menguji gaya sebaris.

const banner = shallow(<Banner/>);
it("render propperely", () => {
expect(banner).toMatchSnapshot();
expect(banner.find(".content")
.get(0).props.style).toHaveProperty("box-sizing", "border-box");
  });
person ali sasani    schedule 26.12.2019
comment
Harap perbarui jawaban Anda untuk memberikan konteks dalam bahasa Inggris yang sederhana - person Mehdi LAMRANI; 26.12.2019
comment
Bisakah Anda menjelaskan sedikit bagaimana jawaban ini akan menyelesaikan masalah, alih-alih memposting jawaban hanya kode. - person Arun Vinoth; 26.12.2019