在JEST測試中使用酶來查找React中名稱間隔的子組件

我正在使用一些react-bootstrap組件構建組件，特別是Modal及其名稱間隔的子組件，例如， Modal.Heading（或Modal.Title,Modal.Body等）。例如：在JEST測試中使用酶來查找React中名稱間隔的子組件

... 
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> 
    ); 
    } 
}

一個玩笑測試套件中使用酶我能找到Modal組件的各種兒童，包括DOM元素和其他定製的反應的組分。但是我無法找到命名空間的子組件：

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')，即包括命名空間，
mount(<MyComponent/>)而不是shallow(<MyComponent/>)與上述兩者結合find選項

那麼，我該如何使用酶來找到一個名稱間隔的孩子組件？

來源

2017-03-03 Andrew Willems

非名稱間隔部件可以被識別爲用於find方法，是一個變量（例如OtherComponent）或一個字符串（例如'OtherComponent'），但是一個命名空間的分量的參數只能被識別爲變量（例如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 
});

來源

2017-03-03 19:30:00

我有同樣的問題，我找到了我在查找函數中使用「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（））.BeBe（true），並且在我調用expect（modal.find（））之前，我必須首先在我的組件上創建.find('Modal')。）上的變量。所以我有;

let modal = shallow(<ModalInstance title={props.title.delete}/>) ，然後再從閱讀這篇文章，我看到你有
let modal = shallow(<ModalInstance title={props.title.delete}/>).find('Modal')，當我叫expect(modal.find('Title')).toHaveLength(1)，這是當它顯示錯誤消息。

來源

2017-09-07 00:06:56

在JEST測試中使用酶來查找React中名稱間隔的子組件

回答

相關問題