We have recently switched from react-loadable to @loadable/components for a number of reasons but had a hard time getting our tests to continue passing.
In react-loadable we would
preload the components at the top of the test file so they would render synchronously, this behavior is quite hard to achieve in @loadable/components unless you use Webpack to compile your tests.
We use TypeScript in our project, but the below can be adapted to non-typescript projects as well.
We wrote jest mocks for the loadable components modules rather than trying to get the library to play nice.
The mock module eagerly calls the
load function to kick off resolving the module, this would mean we had a race condition. So I also provide an implementation of
load which returns the promise for the loading module.
Finally our ts-jest config to ensure the dynamic imports work
I hope this saves you some time!