Question: How to know if the loading status of Suspense resolved

Do you want to request a feature or report a bug?

Question

What is the current behavior?

I’m trying to implement supports of React.lazy and React.Suspense in enzyme (airbnb/enzyme#1975). I’d like to have something like waitUntilLazyLoaded so we can write such test:

// in DynamicComponent.js

class DynamicComponent extends React.Component {
  render() {
    // render something
  }
}

// in test.js

const LazyComponent = lazy(() => import('./DynamicComponent'));
const Fallback = () => <div />;
const SuspenseComponent = () => (
  <Suspense fallback={<Fallback />}>
    <LazyComponent />
  </Suspense>
);

// mount the react element
const wrapper = mount(<SuspenseComponent />)

// On starter this should render Fallback
expect(wrapper.find('Fallback')).to.have.lengthOf(1)
expect(wrapper.find('DynamicComponent')).to.have.lenghtOf(0)

// wait for LazyComponent loading DynamicComponent and update of rendering
await wrapper.waitUntilLazyLoaded()

// render loaded component now
expect(wrapper.find('Fallback')).to.have.lengthOf(0)
expect(wrapper.find('DynamicComponent')).to.have.lengthOf(1)

Inside the mount implementation we call the ReactDOM.render to render it and get the root fiber node. Now my problem is: Given a Fiber node of Suspense, how could we know the loading status of Suspense so I can make sure whether (1) the module is loaded successfully loaded (or failed) and (2) React has rendered (or not rendered) the new component tree?

I’m not familiar with the implementation detail of Fiber and I’m still trying to investigate into this. That would be great if someone familiar with this could answer. Thanks!

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

^16.6

[chenesan]

Ah, I found out that to test lazy synchronously we can just handle it with mock utility in jest or sinon, no need to have resetLoader.

// in LazyComponent.js
const LazyComponent = React.lazy(() => import("./InternalComponent"))

// in some component using LazyComponent
const ComponentToTest = () => {
  return (<Suspense fallback={<Fallback />}>
    <LazyComponent />
  </Suspense)
}

// in test code (using jest)

beforeAll(() => {
  jest.mock('/path/to/LazyComponent', () => InternalComponent) // or pass synchronous thenable to React.lazy
})

// will render ComponentToTest with InternalComponent in initial mount.
const ComponentToTest = require('./ComponentToTest')
ReactDOM.render(<ComponentToTest />)

Still thanks for discussion 😃

[tmkasun]

I’m too having this testing issue,Simply my problem is, How to test components with <Suspense/> and lazy loads. I’m using babel-plugin-dynamic-import-node for dynamic lazy imports, But couldn’t find a proper solution for thenable <Suspense/> output. The most viable method I could found was, mocking the React.Suspense implementation to make it synchronous.

I couldn’t understand how @gaearon’s https://github.com/facebook/react/pull/14626 PR could help to solve this testing issue?