Enzyme in Jest test를 사용하여 React에서 이름 간격의 하위 구성 요소를 찾습니다.

Question

일부 react-bootstrap 구성 요소, 특히 Modal 및 이름이 간격을 둔 하위 구성 요소를 사용하여 구성 요소를 작성합니다. Modal.Heading (또는 Modal.Title, Modal.Body 등). 예를 들어하십시오 농담 테스트 스위트 내에서 효소를 사용

... 
import { Modal } from 'react-bootstrap/lib'; 
import OtherComponent from './OtherComponent'; 
class MyComponent extends React.Component { 
    ... 
    render() { 
    return (
     <div> 
     <Modal> 
      <p>{someContent}</p> 
      <OtherComponent/> 
      <Modal.Header>{someOtherContent}</Modal.Header> 
     </Modal> 
     </div> 
    ); 
    } 
} 

나는 DOM 요소 및 기타 사용자 정의 구성 요소 반응을 포함하여 Modal 구성 요소의 다양한 아이를 찾을 수 있습니다. 내가 시도

const modal = shallow(<MyComponent/>).find('Modal'); 

it('should find the Modal element',() => { 
    expect(modal).toHaveLength(1); // passes 
}); 

it('should find a child DOM element',() => { 
    expect(modal.find('p')).toHaveLength(1); // passes 
}); 

it('should find a regular child component',() => { 
    expect(modal.find('OtherComponent')).toHaveLength(1); // passes 
}); 

it('should find a name-spaced child component',() => { 
    expect(modal.find('Modal.Header')).toHaveLength(1); // fails ***** 
}); 

: 그러나 나는 이름 간격 하위 구성 요소를 찾을 수 없습니다 즉, 네임 스페이스를 떠나,

.find('Header') 위의 그림과 같이

• .find('Modal.Header'), 즉 네임 스페이스를 포함하여,
• shallow(<MyComponent/>) 대신에 상기 find 옵션과 조합하여

그렇다면 Enzyme을 사용하여 이름이 지정된 하위 구성 요소를 찾는 방법은 무엇입니까?

Answer 1

비 이름 이격 성분 (예 'OtherComponent')의 변수 (예 OtherComponent) 또는 문자열하지만 이름 이격 구성 요소 중 하나로서 find 방법에 대한 파라미터로 식별 될 수있다 만 식별 될 수있다 변수 (예 : Namespace.Component)이지만 은이 아님 (예 : 'Namespace.Component'이 아님). 즉 :

it('should find a non-name-spaced component as a variable',() => { 
    expect(modal.find(OtherComponent)).toHaveLength(1); // passes 
}); 

it('should find a non-name-spaced component as a string',() => { 
    expect(modal.find('OtherComponent')).toHaveLength(1); // passes 
}); 

it('should find a name-spaced component as a variable',() => { 
    expect(modal.find(Modal.Heading)).toHaveLength(1); // passes 
}); 

it('should (not) find a name-spaced component as a string',() => { 
    expect(modal.find('Modal.Heading')).toHaveLength(1); // fails 
}); 

Answer 2

저도 같은 문제가 있었고, 난 찾기 기능에서 'ModalHeader'또는 'ModalTitle'를 사용하여 광산을 발견했다. 그래서 내가 가지고있다 expect(modal.find('ModalTitle')).toBe(true);

콘솔에 어떤 객체가 예상대로 전달되었는지를 알았을 때 우연히 발견했다. 이것은 출력했다 : 나는 그것을 통해 찾고 있었다

Expected value to have length: 
    1 
Received:  {"complexSelector": {"buildPredicate": [Function buildPredicate], "childrenOfNode": [Function childrenOfNode], "findWhereUnwrapped": [Function findWhereUnwrapped]}, "length": 0, "node": undefined, "nodes": Array [], "options": {}, "renderer": null, "root": {"complexSelector": {"buildPredicate": [Function buildPredicate], "childrenOfNode": [Function childrenOfNode], "findWhereUnwrapped": [Function findWhereUnwrapped]}, "length": 1, "node": <div className="static-modal"><Modal animation={true} autoFocus={true} backdrop={true} bsClass="modal" className="modal" dialogComponentClass={[Function ModalDialog]} enforceFocus={true} keyboard={true} manager={{"add": [Function anonymous], "containers": Array [],"data": Array [], "handleContainerOverflow": true, "hideSiblingNodes": true, "isTopModal": [Function anonymous], "modals": Array [], "remove":[Function anonymous]}} onHide={[Function onHide]} renderBackdrop={[Function renderBackdrop]} restoreFocus={true} show={false}>**<ModalHeader bsClass="modal-header" closeButton={false} closeLabel="Close">** 

와 나는 ModalHeader을보고 내가 찾는 한 무슨 그게 전부 알고 있었다. 그것은 toHaveLength(1)을 사용해야하는 객체를 표시하기 위해 .exists() 일 때 표시되지 않습니다. toBe (true)이고, expect (modal.find())를 호출하기 전에 먼저 구성 요소에서 .find('Modal')을 가져야했습니다.) 변수에. 그래서 나는 가지고 있었다.

let modal = shallow(<ModalInstance title={props.title.delete}/>) 제 나는이 expect(modal.find('Title')).toHaveLength(1)를 호출 할 때 오류 메시지를 보여 주었다 때, 그건 당신이
let modal = shallow(<ModalInstance title={props.title.delete}/>).find('Modal') 있었다보고이 게시물을 읽고에서.