javascript - tag - title of page html

Desmontar/destruir componente en prueba jsdom

Question

¿Hay una manera de desmontar y recolectar un componente React que se montó usando TestUtils.renderIntoDocument dentro de una prueba jsdom?

Estoy tratando de probar algo que sucede en componentWillUnmount y TestUtils.renderIntoDocument no devuelve ningún nodo DOM al que llamar React. unmountComponentAtNode React. unmountComponentAtNode en.

Answer 1

Después de la prueba, puede llamar a componentWillUnmount () en el componente manualmente.

beforeEach ->
@myComponent = React.addons.TestUtils.renderIntoDocument <MyComponent/>
afterEach ->
@myComponent.componentWillUnmount()

Answer 2

Llamar a componentWillUnmount directamente no funcionará para ningún niño que necesite limpiar cosas en desmontaje. Y tampoco es necesario replicar el método renderIntoDocument , ya que puedes usar parentNode :

React.unmountComponentAtNode(React.findDOMNode(component).parentNode);

Actualización: a partir de React 15 necesita usar ReactDOM para lograr lo mismo:

import ReactDOM from ''react-dom'';
// ...
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(component).parentNode);

Answer 3

Me topé con esta pregunta, imagino que proporcionaría una manera de abordarla directamente usando la API de renderIntoDocument descrita. Esta solución funciona en el contexto de PhantomJS.

Para montar en el nodo de documento:

theComponent = TestUtils.renderIntoDocument(<MyComponent/>);

Para desmontar desde el nodo de documento:

React.unmountComponentAtNode(document);

Answer 4

No, pero simplemente puedes usar ReactDOM.render manualmente:

var container = document.createElement(''div'');
ReactDOM.render(<Component />, container);
// ...
ReactDOM.unmountComponentAtNode(container);

Esto es exactamente lo que hace ReactTestUtils de todos modos , por lo que no hay razón para no hacerlo de esta manera si necesita una referencia al contenedor.

Answer 5

Solo para actualizar la respuesta de @BenAlpert. React.renderComponent quedará en desuso pronto, por lo que debería usar los métodos ReactDOM en su lugar:

var container = document.createElement(''div'');
ReactDOM.render(<Component />, container);
// ...
ReactDOM.unmountComponentAtNode(container);