Before rendering all the UI elements I check that the relevant state parameters aren't null.

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

Then in my test I check that component matches the snapshot, the initial state has null parameters, so the snapshot will only return the one empty div. So, that works, I can check that the component isn't rendered when it shouldn't be, but how can I add another snapshot, or something else, to see that everything is rendered correctly when the state no longer contains null?

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