Antes de representar todos los elementos de la interfaz de usuario, verifico que los parámetros de estado relevantes no sean nulos.

 render() { if(this.state.one === null || this.state.two === null || this.state.three === null){ return <div/> } return( // divs for actual UI ) }

Luego, en mi prueba, verifico que el componente coincida con la instantánea, el estado inicial tiene parámetros nulos, por lo que la instantánea solo devolverá el div vacío. Entonces, eso funciona, puedo verificar que el componente no se represente cuando no debería, pero ¿cómo puedo agregar otra instantánea, o algo más, para ver que todo se procesa correctamente cuando el estado ya no contiene nulo?

 import React from 'react'; import { shallow } from 'enzyme'; import TheUIComponent from './TheUIClass'; let component; beforeEach(() => { component = shallow(<TheUIComponent/>); }); describe('UIComponent', () => { it('should render correctly', () => { expect(component).toMatchSnapshot(); }); }