How to find a component that is not there on mount?

Question

I have this component called "Paginator", but it's not available on mount:

<Col xs='4'>
    {
        (() => {
            if (this.state.gridApi) {
                return <Paginator pages={this.state.gridApi.paginationGetTotalPages()} gridApi={this.state.gridApi} />
            }
            return <></>
        })()
    }
</Col>

How can I test it if its not there on mount?

import React from 'react';
import RelatorioVendas from './RelatorioVendas';
import { configure, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { AgGridReact } from 'ag-grid-react/lib/agGridReact';
import Paginator from '../../components/General/Paginator';

import { Provider } from 'react-redux';
import { SnackbarProvider } from 'notistack';
import store from '../../store';

configure({ adapter: new Adapter() });

test('renders the "RelatorioVendas" component.', () => {
    const wrapper = mount(
        <Provider store={store}>
            <SnackbarProvider>
                <RelatorioVendas />
            </SnackbarProvider>
        </Provider>
    );
    expect(wrapper.find(Paginator)).toHaveLength(1);
});

How can I "wait" for the state to change and finally render the component?

Answer 1

you should be able to setState of a mounted/shallowed component like this:

it('should render pagination if gridApi exists', () => {
    const relatorioVendas = shallow(< RelatorioVendas />);
    relatorioVendas.setState({ gridApi: {} });
    expect(relatorioVendas.find(Paginator)).toHaveLength(1);
});