Enzyme: React Lazy tests failing. Error: Method “props” is meant to be run on 1 node. 0 found instead.

[DonikaV]

Your environment

Macos, Linux

API

• [ ] shallow

Version

| library | version
| ------------------- | -------
| enzyme | 3.10.0
| react | 16.8.6
| react-dom | 6.8.6
| react-test-renderer |
| adapter (below) |

Adapter

• [ ] enzyme-adapter-react-16

ParentComponentWIthSuspense.js

const OtherComponent = React.lazy(() => import('src/main/js/OtherComponent'));```
Render()
```jsx
return (
            <div>
                <React.Suspense fallback={<Spinner />}>
                    <OtherComponent  here some props/>
                 </React.Suspense>
            </div>

And this is tests

let shallowInitialComponent = async () => {
        const wrapper = shallow(<ParentComponentWIthSuspense {...props} />);
        await waitNextTick();
        wrapper.update();
        return wrapper;
    };

it("Should render", async () => {
        const expectedProps = {
            title: "Some title",
            desc: "Some cool desc",
            .....// others
        };

        const wrapper = await shallowInitialComponent();
        Object.values(expectedProps).forEach((item) => {
            expect(wrapper.find("OtherComponent").prop(item)).toBe(expectedProps[item]);
        });
    });

The interesting thing. That it see Suspense. I mean if i will use standard import instead of lazy. The tests are passed... It is weird...

[ljharb]

What version of the react 16 adapter are you using?

what does wrapper.debug() print out?

[DonikaV]

react adapter 1.14.0
.debug will show you tomorrow. Thanks

[DonikaV]

@ljharb Hi, i dont know if it could help you.

 console.log src/test/js/unit/results/parentComponent/ParentComponent.spec.js:78
    <div>
      <Suspense fallback={{...}}>
        <lazy //HERE MY PROPS>
      </Suspense>
    </div>

[ljharb]

You'll note there's no OtherComponent in that tree, so .find('OtherComponent') should return an empty wrapper. Specifically, try .find(OtherComponent) - ie, by constructor, not by display name.

[DonikaV]

let design = wrapper.find('OtherComponent');
console.log(design); // ShallowWrapper {}
expect(design.length).toBe(1);
Expected: 1
Received: 0

[ljharb]

@DonikaV right - i'm saying to never pass a string component name into .find - do .find(OtherComponent), where OtherComponent is the actual component constructor/function for the child of the Suspense (which currently isn't exported; so you'd have to export it, and import it in the test).

[DonikaV]

@ljharb i should import with lazy? Or just import?
Because i changed wrapper.find('OtherComponent'); to wrapper.find(OtherComponent); and same situation.

[ljharb]

In your component file, you should change:

const OtherComponent = React.lazy(() => import('src/main/js/OtherComponent'));

to:

export const OtherComponent = React.lazy(() => import('src/main/js/OtherComponent'));

and then in your tests, you'd need to import { OtherComponent } from 'wherever';, and then you can do .find(OtherComponent).

If that's still not working, a repro repo would be most helpful.

[DonikaV]

Works fine! Thank you so much ! :)

[rodoabad]

@DonikaV are you having any problems with your coverage?

[DonikaV]

No, everything works fine.

[YcodeMan]

I have the same problem。 if import OtherComponent can found. but lazy(() => import('src/main/js/OtherComponent')) not found。is lazy problem? How to solve ？