Enzyme: Can't use array destructuring on .find() results

[callumlocke]

Current behavior

It is not possible to destructure a .find() and run assertions on the individual items, like this:

const [firstTab, secondTab] = wrapper.find('.tab');
expect(firstTab.text()).toBe('Foo'); //  Error: firstTab.text is not a function

Expected behavior

It would be cool if it was possible.

Your environment

API

• [ ] shallow
• [x] mount
• [ ] render

Version

| library | version
| ---------------- | -------
| Enzyme | 3.2.0
| React | 16.1.0

Adapter

• [x] enzyme-adapter-react-16
• [ ] enzyme-adapter-react-15
• [ ] enzyme-adapter-react-15.4
• [ ] enzyme-adapter-react-14
• [ ] enzyme-adapter-react-13
• [ ] enzyme-adapter-react-helper
• [ ] others ( )

[ljharb]

.find should return the same kind of wrapper as the root; wrappers have iterators: shallow, mount

The issue is that we've defined this to return the element, and not an enzyme wrapper.

I suppose we could add a wrapper instance method like .wrappers() that returned an iterator for .at(i), but I'm not sure it's worth the complexity.

[callumlocke]

I think a .wrappers() method would be really useful, not just for the destructuring case I outlined above, but for any case where you want to get an array of wrapped elements for running assertions against.

const listItems = [...wrapper.find('li').wrappers()];

Having things as an array lets you use standard methods like .every() and .some() which can be really useful in tests.

You can also use .map() to get a new array of values deduced from each wrapper, which can then be used with any assertion library method that works with arrays. (Jest has several expect matchers that handle arrays intuitively.) Or simply use .forEach() to make an assertion for each item.

[ljharb]

@callumlocke when looking into this, I realized that we already have a .map method - so you can already do wrapper.map(x => x) and you'll get the array you want.

Does this address your use case?

[callumlocke]

I guess so, that's good enough for me. Thanks.