使用renderIntoDocument測試功能組件

我正在學習測試React無狀態組件使用ReactTestUtils庫。這是我簡單的組件：使用renderIntoDocument測試功能組件

import React from 'react'; 

const Greeter = ({name,place}) => (
    <h1>Hello,{name}. Welcome to the {place}.</h1> 
); 

export default Greeter;

這是我的測試規範，以獲得renderIntoDocument工作，我包裹在一個div我迎賓分量的建議here：

import {expect} from 'chai'; 
import React from 'react'; 
import ReactTestUtils from 'react-addons-test-utils'; 
import Greeter from '../Greeter'; 

describe('Greeter Components',() => { 
    it('renders correctly',() => { 
    var component = ReactTestUtils.renderIntoDocument(<div> 
     <Greeter name="Vamsi" place="Hotel California"/> 
    </div>); 

    var hasH1 = ReactTestUtils.findRenderedDOMComponentWithTag(component,'h1'); 
expect(hasH1).to.be.ok; 
    }); 
});

我得到的錯誤

findAllInRenderedTree（...）：實例必須是複合組件。

我將我的代碼作爲jsbin here提供。

來源

2016-04-17 vamsiampolu

由於函數組件沒有與它們關聯的實例，因此不能直接將它們與render或renderIntoDocument一起使用。試圖包裝功能組件是一個好主意，不幸的是，使用div不能用於類似的原因。 DOM組件也不返回組件實例，而是返回底層的DOM節點。

這就是說您不能使用測試應用程序函數或原生組件作爲您正在呈現的「根」組件。相反，您需要將功能組件包裝在使用createClass或擴展React.Component的包裝組件中。

class Wrapper extends React.Component { 
    render() { 
    return this.props.children 
    } 
} 

let component = renderIntoDocument(<Wrapper><Greeter /></wrapper>

疑難雜症的喜歡，這可能是有足夠的理由讓使用第三方測試庫如流行的酶，還是我自己取的：teaspoon。通過無縫地爲您包裝和展開功能組件，您都可以抽象出像這樣的問題，因此您無需擔心要呈現的組件類型。

來源

2016-04-17 21:26:41

這幫了我很多 – codeVerine

包裝<div>中的功能組件適用於我。你只需要搜索您可以針對myNode使用cpt.childNodes[0]

來源

2017-07-14 17:22:34

爲了提高@寺院恐慌的答案測試你想以不同的測試小部件，即

const props = { p1: "1" } 
test('Foo renders correctly classed div',() => { 
    const cpt = TestUtils.renderIntoDocument(<div><Foo {...props} /></div>); 
    const myNode = ReactDOM.findDOMNode(cpt.childNodes[0]); 
    expect(myNode.className).toBe('my-class'); 
});

通知，我的兩個美分：

您不必爲此創建類。動態地做：

import createReactClass from 'create-react-class'; 

// need to be a class component 
const Clazz = createReactClass({ 
    render:() => { 
    return <YourFunctionalComponentName {...props} />; 
    }, 
}); 

ReactTestUtils.renderIntoDocument(<Clazz />);

來源

2017-12-24 04:51:06 thiagoh

使用renderIntoDocument測試功能組件

回答

相關問題