Unit testing of the updated component in react using jest and enzyme

Question

I am trying to write the testing file for the following code. with my present code

import React from 'react';
import renderer from 'react-test-renderer';
// import { mount } from 'enzyme';
import LazyToastMessage from '../LazyToastMessage';
import IntlHelper from "test/util/Mount";
import nls from "src/nls/homepageHeader.json";

describe('the suspended toast message component renders correctly', () => {
    const mountWithNLS = new IntlHelper(nls);
    
    it('LazyToastMessage fallback', () => {
        const mockHandler = jest.fn();
        const wrapper = renderer.create(mountWithNLS.mountWithIntl(
        <LazyToastMessage
        state
        message="test message"
        iconType="success"
        handleToasterStateChange={mockHandler}
        />)
        )
        expect(wrapper.toJSON()).toMatchSnapshot();
    })
});

The result of the snapshot is giving as null . How can I test the updated component and take its snapshot?

The Lazy component is the following:

import React, {lazy, Suspense} from "react";
import {IAppProps} from 'src/js/components/misc/ToastMessage'

const LazyToastMessage = lazy(() =>
    import(/* webpackChunkName: "toast-message" */ "./ToastMessage"),
);

export default function(props: IAppProps) {
    return (
        <Suspense fallback={null}>
            <LazyToastMessage {...props} />
        </Suspense>
    );
}

Answer 1

To test it properly, you have to wrap your lazily loaded component in Suspense in test.

First, in your component:

export const LazyToastMessage = ...

Then, in your test:

import SuspendedLazyToastMesssage, {LazyToastMessage} from '../LazyToastMessage';

.
.
.
const wrapper = renderer.create(mountIthNLS(mountWithIntl(
    <Suspense fallback=null>
        <SuspendedLazyToastMessage/>
    </Suspense>
));

await LazyToastMessage;

expect(wrapper.toJSON()).toMatchSnapshot();

Or something like that, but you get the idea...