訪問實例的方法 - React.js

Question

我寫一些測試我的陣營組成：

let DebugElement = TestUtils.renderIntoDocument(<Debug />); 
console.log(DebugElement) 
spyOn(DebugElement, 'fetchAndSelect'); 

然而，它說，fetchAndSelect不存在。這是真的。

我總結我的部件，像這樣：

import { DragDropContext } from 'react-dnd'; 

const Debug = React.createClass({ 
    fetchAndSelect() {} 
}); 

export default DragDropContext(HTML5Backend)(Debug); 

如果你看一下下面的截圖，你可以看到，我可以訪問內部refs.child我的組件的方法。這是正確的方式嗎？

Answer 1

通過getDecoratedComponentInstance()提供的包裝組件實例：

let tree = TestUtils.renderIntoDocument(<Debug />); 
let DebugElement = tree.getDecoratedComponentInstance(); 
console.log(DebugElement); 
spyOn(DebugElement, 'fetchAndSelect'); 

您還可以通過DecoratedComponent訪問被包裝的組件類型的原始的，未包裝的成分型，你可以使用TestUtils.findRenderedComponentWithType或其他方法找到組件：

let tree = TestUtils.renderIntoDocument(<Debug />); 
let DebugElement = TestUtils.findRenderedComponentWithType(
    tree, Debug.DecoratedComponent 
); 
console.log(DebugElement) 
spyOn(DebugElement, 'fetchAndSelect'); 

查看Testing docs瞭解更多信息。