Mock out imported Lazy React component

Here’s my lazy component:

const LazyBones = React.lazy(() => import('@graveyard/Bones')
  .then(module => ({default: module.BonesComponent}))
export default LazyBones

I’m importing it like this:

import Bones from './LazyBones'

export default () => (
<Suspense fallback={<p>Loading bones</p>}>
  <Bones />
</Suspense>
)

And in my test I have this kind of thing:

import * as LazyBones from './LazyBones';

describe('<BoneYard />', function() {
  let Bones;
  let wrapper;
  beforeEach(function() {
    Bones = sinon.stub(LazyBones, 'default');
    Bones.returns(() => (<div />));
    wrapper = shallow(<BoneYard />);
  });
  afterEach(function() {
    Bones.restore();
  });

  it('renders bones', function() {
    console.log(wrapper)
    expect(wrapper.exists(Bones)).to.equal(true);
  })

})

What I expect is for the test to pass, and the console.log to print out:

<Suspense fallback={{...}}>
  <Bones />
</Suspense>

But instead of <Bones /> I get <lazy /> and it fails the test.

How can I mock out the imported Lazy React component, so that my simplistic test passes?

Source: ReactJs