unit testing - test - ¿Cómo verificar los puntales de un nodo DOM en una prueba unitaria en React 0.14?

jest js io

Question

Después de actualizar React de 0.13 a v0.14.0-beta3 , recibí muchas advertencias como esta en mis pruebas unitarias:

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`.

Son causados ​​por mis pruebas unitarias, por ejemplo:

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'');
});

¿Cómo puedo solucionar esto? ¿Hay alguna práctica recomendada para probar elementos DOM como este?

Answer 1

En el depurador descubrí que estos elementos (como, en mi caso, TestUtils.scryRenderedDOMComponentsWithTag(button, ''a'')[0] ) son de hecho elementos DOM con solo algunas propiedades React agregadas (como props y state ).

Entonces, ahora, con este conocimiento, puedo escribir mis afirmaciones basadas en atributos y propiedades DOM, como:

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

Answer 2

Para arreglar la advertencia simplemente llame a un accesorio directamente. Por ejemplo:

código de advertencia:

this.refs.input.props.name

código fijo:

this.refs.input.name