คำถามติดแท็ก enzyme

ฉันกำลังทดสอบองค์ประกอบการตอบสนองด้วยการเรนเดอร์ตื้นของเอนไซม์จัสมิน ทำให้ง่ายขึ้นที่นี่เพื่อวัตถุประสงค์ของคำถามนี้ ... function MyOuterComponent() { return ( <div> ... <MyInnerComponent title="Hello" /> ... <MyInnerComponent title="Good-bye" /> ... </div> ) } MyOuterComponentมี 2 ​​อินสแตนซ์MyInnerComponentและฉันต้องการทดสอบอุปกรณ์ประกอบฉากในแต่ละอัน คนแรกที่ฉันรู้วิธีทดสอบ ฉันใช้findกับfirst... expect(component.find('MyInnerComponent').first()).toHaveProp('title', 'Hello'); อย่างไรก็ตามฉันกำลังดิ้นรนเพื่อทดสอบตัวอย่างที่สองของMyInnerComponentไฟล์. ฉันหวังว่าสิ่งนี้จะได้ผล ... expect(component.find('MyInnerComponent').second()).toHaveProp('title', 'Good-bye'); หรือแม้แต่สิ่งนี้ ... expect(component.find('MyInnerComponent')[1]).toHaveProp('title', 'Good-bye'); แต่แน่นอนว่าทั้งสองอย่างข้างต้นไม่ได้ผล ฉันรู้สึกว่าตัวเองหายไปอย่างชัดเจน แต่เมื่อฉันดูเอกสารฉันไม่เห็นตัวอย่างที่คล้ายคลึงกัน ใคร?

130 reactjs  jasmine  enzyme 

ก่อนที่จะโพสต์คำถามนี้ฉันพยายามค้นหาใน sqa stackexchange แต่ฉันไม่พบโพสต์เกี่ยวกับตื้นและแสดงผลที่นั่นดังนั้นฉันหวังว่าจะมีคนช่วยฉันได้ที่นี่ ฉันควรใช้ตื้นและเรนเดอร์ในการทดสอบส่วนประกอบปฏิกิริยาเมื่อใด จากเอกสารของ airbnb ฉันได้แสดงความคิดเห็นเกี่ยวกับความแตกต่างของทั้งสอง: เนื่องจากตื้นเป็นการทดสอบส่วนประกอบเป็นหน่วยดังนั้นจึงควรใช้สำหรับส่วนประกอบ "หลัก" (เช่นตารางกระดาษห่อ ฯลฯ ) Render มีไว้สำหรับส่วนประกอบย่อย เหตุผลที่ฉันถามคำถามนี้คือฉันมีเวลายากที่จะคิดว่าฉันควรใช้อันไหน (แม้ว่าเอกสารจะบอกว่าคล้ายกันมากก็ตาม) ดังนั้นฉันจะรู้ได้อย่างไรว่าควรใช้อันไหนในสถานการณ์เฉพาะ

100 testing  meteor  reactjs  chai  enzyme 

ฉันสับสนเกี่ยวกับวิธีการเข้าถึงคุ้มค่าเมื่อใช้<input> mountนี่คือสิ่งที่ฉันได้รับจากการทดสอบของฉัน: it('cancels changes when user presses esc', done => { const wrapper = mount(<EditableText defaultValue="Hello" />); const input = wrapper.find('input'); console.log(input.render().attr('value')); input.simulate('focus'); done(); }); undefinedคอนโซลพิมพ์ออก แต่ถ้าฉันแก้ไขโค้ดเล็กน้อยมันใช้งานได้: it('cancels changes when user presses esc', done => { const wrapper = render(<EditableText defaultValue="Hello" />); const input = wrapper.find('input'); console.log(input.val()); input.simulate('focus'); done(); }); …

91 unit-testing  reactjs  enzyme 

ฉันใช้ UseHistory hook ใน router router v5.1.2 กับ typescript หรือไม่ เมื่อเรียกใช้การทดสอบหน่วยฉันพบปัญหา TypeError: ไม่สามารถอ่าน 'ประวัติ' ของคุณสมบัติที่ไม่ได้กำหนด import { mount } from 'enzyme'; import React from 'react'; import {Action} from 'history'; import * as router from 'react-router'; import { QuestionContainer } from './QuestionsContainer'; describe('My questions container', () => { beforeEach(() => { …

17 reactjs  typescript  react-router  jestjs  enzyme 

ผมเคยเขียนปุ่มที่กำหนดเอง ( MyStyledButton) ตามวัสดุ UI Button import React from "react"; import { Button } from "@material-ui/core"; import { makeStyles } from "@material-ui/styles"; const useStyles = makeStyles({ root: { minWidth: 100 } }); function MyStyledButton(props) { const buttonStyle = useStyles(props); const { children, width, ...others } = props; return ( <Button …

16 javascript  css  reactjs  jestjs  enzyme