enzyme: React.Lazy always returning the Fallback value

Yeah I was trying to use wrapper.debug() to see the output.

The suspenseFallback option seems to not be making a difference to what is output.

const wrapper = shallow(<ComponentWrapper />, { suspenseFallback: true });
console.log(wrapper.debug());

      <Suspense fallback="...">
        <lazy />
      </Suspense>

const wrapper = shallow(<ComponentWrapper />, { suspenseFallback: false });
console.log(wrapper.debug());

      <Suspense fallback="...">
        <lazy />
      </Suspense>

I would have expected in the second example to see my <LazyComponent /> in place of <lazy />

Still experiencing this issue.

@philearley does it work to you with mount()? to me it returns fallback as well as shallow() does

@liegeandlief no, the commit that closed the PR shows it’s not yet in enzyme-adapter-react-16. i’ll cut a release tomorrow.

Hi there, is there any update on the issue? Thanks.

Well, sadly I have to say that it’s still not working for me:

<Suspense fallback={{...}}>
  <lazy defaultCollapsed={false} />
  <lazy defaultCollapsed={false} />
</Suspense>

I’m using the latest version of every package: “enzyme”: “^3.11.0”, “enzyme-adapter-react-16”: “^1.15.6”,

Unfortunately this still isn’t working for me. My test is as follows:

test('it renders as expected', () => {
  const wrapper = shallow(<PageSwitch pageData={{ key: 'home' }} />, { suspenseFallback: true })
  expect(wrapper.find(PageSwitchFallback)).toHaveLength(1)
  expect(wrapper.find(Home)).toHaveLength(0)

  const wrapper2 = shallow(<PageSwitch pageData={{ key: 'home' }} />, { suspenseFallback: false })
  expect(wrapper2.find(PageSwitchFallback)).toHaveLength(0)
  expect(wrapper2.find(Home)).toHaveLength(1)  / * FAILS HERE - expected 1 received 0 */
})

My PageSwitch component is as follows:

const Home = lazy(() => import('../pages/Home/'))

const PageSwitchFallback = memo(() => {
  return <div aria-live='polite' aria-busy /> 
})
PageSwitchFallback.displayName = 'PageSwitchFallback'

const PageSwitch = memo(({ pageData }) => {
  const renderPageComponent = useCallback(() => {
    if (pageData === 'NOT_FOUND') return null

    switch (pageData.key) {
      case 'home':
        return <Home />
    }
  }, [pageData])

  return (
    <Suspense fallback={<PageSwitchFallback />}>
      {renderPageComponent()}
    </Suspense>
  )
})
PageSwitch.displayName = 'PageSwitch'

export default PageSwitch

I have confirmed that it is reaching the home case in the switch block but the test does not seem to find the Home component. The Home component is also memoized and has its displayName property set to Home.

Can you see anything I’m doing wrong here?

v1.15.3 of the adapter has been released.

@webdevsyd Maybe a little late to the party but I found that I had to dive into my component and then I could find what I was looking for.

const wrapper1 = shallow(<LazyComponent />,  {suspenseFallback: true});
expect(wrapper1.dive().find('FallbackComponent').length).toBe(1);

const wrapper2 = shallow(<LazyComponent />,  {suspenseFallback: false});
expect(wrapper2.dive().find('LazyComponent').length).toBe(1);

I created #2328 to resolve this issue and make a note in PR, please read it.

@skyboyer when I tried to use mount I received warnings saying Mount was not supported.