react-test-renderer doesn't support Suspense and lazy nodes

[Dem0n13]

Hello. How can I test components with Suspense/Lazy?
now renderer.create(...)toTree() throws
"toTree() does not yet know how to handle nodes with tag=13"

react 16.6.1
react-test-renderer 16.6.1

[balazsorban44]

Getting something similar with Enzyme.
Enzyme Internal Error: unknown node with tag 13

[chenesan]

Hi @gaearon , sorry for pinging here. In enzymejs/enzyme#1975 we are also stuck with that the shallow renderer doesn't support rendering Suspense.
I'm not sure what should the expected result of shallow render Suspense be (Should the fallback / React.lazy mechanism works here? Or we can have some options in ShallowRender to handle this?). But I think there are some use cases that people will want to shallow render Suspense to get the children under it (like wrapper.dive() in enzyme). It'd be great to make it work.

[Jessidhia]

I suspect that until Buzz (or was it Fizz?) is ready, you'll have to do with just rendering the fallback. The current server renderer is synchronous.

[chenesan]

Shallow render is different with server renderer I think. I'm just wondering how we can support Suspense in shallow renderer.

[su-kialo]

Hi, I'm wondering if there is any decision made regarding how Suspense should be treated with the shallow renderer?
We're currently trying to adapt many of our components to be lazily loaded and we're running into troubles with our snapshot testing where the component names in our snapshots always end up as UNDEFINED if they are lazily loaded.

[milesj]

Just ran into this as well. Assuming this still isn't supported? The promise never resolves and the suspense state always renders the fallback.

[tirthaguha]

Just ran into this as well. Assuming this still isn't supported? The promise never resolves and the suspense state always renders the fallback.

https://www.youtube.com/watch?v=lfb5jvHq9c4

[patrickmcdougle-okta]

One workaround that I used that seems to work at least on my local machine is to await a setTimeout 0 promise after the render but before the expect statements. This gives a tick between the render and the expect to load and render the lazy component.

it('testname', async() => {
  // Render the component using renderer.create
  await new Promise(resolve => {
    window.setTimeout(resolve, 0);
  });
  // Do your expects
});

This cannot be used in cases where timers are mocked since it relies on a timer to operate.

[divmgl]

@patrickmcdougle-okta wow, this actually worked. Thank you!