จะทดสอบสไตล์ภายในคลาส CSS สำหรับส่วนประกอบ React โดยใช้ Jest และ Enzyme ได้อย่างไร

พิจารณาใน CSS

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

ฉันได้เพิ่มคลาส css นี้ภายในองค์ประกอบการโต้ตอบดังต่อไปนี้

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

จะเขียนกรณีทดสอบเรื่องตลกและเอนไซม์เพื่อให้แน่ใจว่า 'box-sizing' กับ 'border-box' ใช้อย่างถูกต้องได้อย่างไร

หมายเหตุ: ฉันสามารถเขียนกรณีทดสอบเพื่อให้แน่ใจว่ามีการเพิ่มคลาส ".content" ให้กับองค์ประกอบนี้ แต่จริงๆ แล้ว ฉันต้องเขียนกรณีทดสอบเพื่อให้แน่ใจว่าค่าอยู่ใน "ขนาดกล่อง"


reactjs jestjs enzyme
person BALA MURUGAN    schedule 26.12.2019    source แหล่งที่มา

คำตอบ (2)


arrow_upward
2
arrow_downward

ฉันไม่แน่ใจว่าจะแก้ไขปัญหาของคุณอย่างไร แต่โปรดจำไว้ว่าการทดสอบของคุณจะไม่ครอบคลุมถึง

* {
  box-sizing: border-box;
}

ถ้าคุณจะกำหนดไว้ที่อื่น

จากมุมมองของฉัน การทดสอบสไตล์ไม่สมเหตุสมผล เนื่องจากเราไม่สามารถรับประกันจากมุมมองของการทดสอบว่าองค์ประกอบจะมีลักษณะตามที่เราต้องการ ดังนั้นคุณจะต้องเปิดเบราว์เซอร์และตรวจสอบว่าองค์ประกอบของคุณทำงานอย่างถูกต้อง แต่คุณกำลังเขียนการทดสอบเพื่อหลีกเลี่ยง

person Krystian Sztadhaus    schedule 26.12.2019

arrow_upward
0
arrow_downward

การเพิ่มโค้ดนี้ลงในไฟล์ Banner.test.js จะตรวจสอบว่า className ชื่อ content มีคุณสมบัติสไตล์อินไลน์สำหรับ box-sizing และเท่ากับ border-box หรือไม่ แต่จะทดสอบเฉพาะสไตล์อินไลน์เท่านั้น

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
โปรดอัปเดตคำตอบของคุณเพื่อให้บริบทเป็นภาษาอังกฤษธรรมดา - person Mehdi LAMRANI; 26.12.2019
comment
คุณช่วยอธิบายหน่อยได้ไหมว่าคำตอบนี้จะช่วยแก้ปัญหาได้อย่างไรแทนที่จะโพสต์คำตอบแบบรหัสเท่านั้น - person Arun Vinoth; 26.12.2019