Come verificare gli oggetti di un nodo DOM in un test di unità in React 0.14?

Question

Dopo l'aggiornamento Reagire da 0.13 a v0.14.0-beta3, ho avuto un sacco di avvertimenti come questo nel mio test di unità:

Warning: ReactDOMComponent: Do not access .props of a DOM node; instead, recreate the props as `render` did originally or read the DOM properties/attributes directly from this node (e.g., this.refs.box.className). This DOM node was rendered by `Button`. 

Essi sono causati da mio test di unità, ad esempio:

it('should render to a <a> when href is given', function() { 
    var button = TestUtils.renderIntoDocument(<Button className="amazon" href="#">Hello</Button>); 
    expect(TestUtils.scryRenderedDOMComponentsWithTag(button, 'button').length).toBe(0); 
    expect(TestUtils.scryRenderedDOMComponentsWithTag(button, 'a').length).toBe(1); 
    expect(TestUtils.scryRenderedDOMComponentsWithTag(button, 'a')[0].props.href).toBe('#'); 
    expect(TestUtils.scryRenderedDOMComponentsWithTag(button, 'a')[0].props.className).toBe('amazon Button'); 
}); 

come si fa Ho risolto questo? C'è qualche pratica raccomandata per testare elementi DOM come questo?

Answer 1

Nel debugger ho scoperto che questi elementi (come, nel mio caso, TestUtils.scryRenderedDOMComponentsWithTag(button, 'a')[0]) sono infatti elementi DOM con solo alcuni Reagire proprietà aggiunte (come props e state).

Così ora, con questa conoscenza, posso scrivere le mie affermazioni sulla base di attributi e le proprietà DOM, come:

expect(b.getAttribute('href')).toEqual('#'); 

Answer 2

Per risolvere l'avviso basta chiamare direttamente un oggetto di scena. Per esempio:

codice di avviso:

this.refs.input.props.name 

codice fisso:

this.refs.input.name