2015-06-12 8 views
11

के साथ राज्य सेट करें मैं शैलो रेंडरिंग के साथ एक प्रतिक्रिया घटक का परीक्षण करना चाहता हूं। लेकिन मैं इसके राज्य के आधार पर घटक का परीक्षण करना चाहता हूं।रिएक्ट शालो रेंडरिंग

ऐसा करने का सही तरीका क्या है? मैंने यह कोशिश की है:

component = shallowRenderer.render(
    <TweetsBox 
     users = 4 
    /> 
); 
    component.setState({initial: true}); // This is not allowed 

    renderResult = shallowRenderer.getRenderOutput(); 

लेकिन मैं इसे काम नहीं कर सकता। उथले प्रतिपादन करते समय राज्य को स्थापित करने का उचित तरीका क्या है?

+0

क्या तरह TweetsBox घटक दिखता है? आमतौर पर आपके पास प्रारंभिक स्थिति होगी। फिर राज्य को संशोधित करने के लिए किसी तरह की घटना शुरू हो सकती है। –

उत्तर

2

यह shallowRenderer React.addons.TestUtils.createRenderer द्वारा वापस की तरह नहीं दिखता बहुत से घटक, सहारा, और बच्चों में पारित के आधार पर रेंडर अलग करने की क्षमता है।

मैं jsdom + React.addons.TestUtils.renderIntoDocument उपयोग करने के लिए राज्य स्थापित करने के लिए किया था एक घटना के माध्यम से (जैसा कि @ नील-किस्टनर ने टिप्पणी की)। मुझे लगता है कि अगर आप सीधे setState पर कॉल करना चाहते हैं तो यह वही है।

यहाँ क्या मेरे लिए काम किया है:

import jsdom from "jsdom"; 
global.document = jsdom.jsdom("<!doctype html><html><body></body></html>"); 
global.window = document.parentWindow; 
global.navigator = { 
    userAgent: "node.js" 
}; 
import React from "react/addons"; 
const TestUtils = React.addons.TestUtils; 
import PriceAtTotalQuantity from "app/components/PriceAtTotalQuantity"; 
import { assert } from "chai"; 

describe("app/components/PriceAtTotalQuantity", function() { 
    it("should show tooltip on mouseover", function() { 
    const props = { 
     currencyCode: "USD", 
     offer: { 
     priceWasConverted: true, 
     priceAtTotalQuantity: 0.1 
     } 
    }; 
    var priceAtTotalQuantity = TestUtils.renderIntoDocument(React.createElement(PriceAtTotalQuantity, props)); 
    var currencyCodeNode = TestUtils.findRenderedDOMComponentWithClass(priceAtTotalQuantity, "currency-code").getDOMNode(); 
    assert.isFalse(priceAtTotalQuantity.state.tooltipIsVisible); 
    TestUtils.Simulate.mouseOver(currencyCodeNode); 
    assert.isTrue(priceAtTotalQuantity.state.tooltipIsVisible);  
    }); 
}); 
संबंधित मुद्दे