He escrito un componente React simple que representa un <iframe> :
export class Iframe extends React.component { render() { return <iframe src={ this.props.src } />; } } y trato de probarlo comprobando que el contenido cargado con src se complete correctamente dentro del <iframe> . Para hacerlo, trato de acceder a frame.contentWindow , pero después de montarlo con Enzyme siempre devuelve undefined .
Intenté burlarme del contenido <iframe> con Sinon FakeXMLHttpRequest :
server = sinon.fakeServer.create(); server.respondWith('GET', 'test', [200, { 'Content-Type': 'text/html' }, '<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><body><div class="myClass">Amazing Unicorn</div></body></html>']); container = mount(<Iframe src='test' />); y con <iframe src='data:text/html' > :
const src = 'data:text/html;charset=utf-8,<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><body><div class="myClass">Amazing Unicorn</div></body></html>'; container = mount(<Iframe src={ src } />);pero en ambos casos en la prueba con Enzyme:
container = mount(<Iframe src='...' />); container.instance().contentWindow // equals 'undefined' container.find('iframe').contentWindow // equals 'undefined' El componente funciona y se representa como se espera en el navegador cuando se le proporciona un atributo src válido. ¿Hay alguna forma de acceder a contentWindow en las pruebas React con Enzyme (o cualquier otro marco de prueba)?
El problema sigue siendo actual. Y la respuesta es que jsdom proporciona contentWindow/contentDocument solo para iframe adjunto, y la enzima por defecto no adjunta nodos. Hay una opción para el montaje que dirige la enzima para unir el nodo:
el = document.createElement('div'); document.body.appendChild(el); wrapper = mount(<MyReactNode />, { attachTo: el });Si está escribiendo una prueba de unidad (y supongo que esto es lo que está haciendo), debe probar el comportamiento, no los detalles de implementación.
Si tuviera que escribir una prueba para dicho componente, usaría algo así:
src pasadosrc en propsEsta prueba maneja tanto: el comportamiento correcto como el incorrecto. Consulte Programación defensiva para obtener más detalles.
Si estamos hablando de la implementación de la prueba, usaría el método Jest y toMatchSnapshot para verificar el resultado de la representación en ambos escenarios.