在React中模擬兒童組件

當單元測試一個元素，使用摩卡和朋友時，是否有一種乾淨的方式可以模擬子元素？在React中模擬兒童組件

例如，說我有這樣的事情：

<Parent> 
    <Child aProp={ this.props.clickChild() }/> 
</Parent>

我想嘲笑它，所以我可以手動觸發aProp然後告訴它叫，我通過它clickChild。

來源

2017-03-02 samanime

當您嘗試在您的spec文件中呈現父項時，它已經創建了子項。爲孩子和用戶觸發調用「aProp」 –

我的觀點是，我想阻止它使用真正的孩子，並重寫它所做的。這個例子過於簡單，但我想到的情景是Child會更復雜，我想避開所有的複雜性。 – samanime

聽起來像你正在尋找依賴注入。 – Bergi

經過大量的研究，看起來這是不可能的。如果你以一種非常特定的格式來完成它們，你可以使用某些嘲諷的東西，但是你必須做幾件在你的「真實」代碼中不符合標準的東西。我不是修改測試代碼的粉絲。

另一個我已經解決的情況是，在某些情況下，我只需找到mount()之後的元素，獲取提供回調的屬性，然後直接觸發該屬性並執行我所需的任何操作。不是一個完全通用的場景，但它有效。

拿這個例子代碼：

// Parent.js 
export default class Parent extends React.Component { 
    doSomething() { 
     this.props.doSomethingTriggered(); 
    } 

    render() { 
     return <div> 
      <Child onClick={ this.doSomething.bind() }/> 
     </div>; 
    } 
}

我可以用酶來安裝該組件，然後觸發的Child的onClick財產，窺探我給它，以確保它被正確地調用的回調。

it('should do something',() => { 
     const callback = sinon.spy(() => {}); 
     const wrapper = mount(<Parent doSomethingTriggered={ callback }/>); 
     wrapper.find(Child).props().onClick(); 
     sinon.assert.calledOnce(callback); 
});

不是很嘲笑，但是讓我在某些情況下繞過一大塊相關代碼。

來源

2017-03-08 15:14:44 samanime

在React中模擬兒童組件

回答

相關問題