React-sortable-hoc: How to use react-sortable-hoc with any test framework (Jest, Enzyme, etc)?

[Sir4ur0n]

Hi,

I could not find any documentation/example/anything related to how to use react-sortable-hoc with test frameworks like jest / enzyme / etc.

In my tests (using jest + enzyme) I struggled and finally managed to access the contained wrapper (i.e. the root element passed to SortableContainer) using this:

// RootComponent.jsx
const SortableList = SortableContainer(({ items }) => {
  return (
    <MyContainerComponent>
      {items.map((value, index) =>
        <SortableItem key={value.name} index={index} value={value} />
      )}
    </MyContainerComponent>
  );
});

class RootComponent extends Component {
  render() {
    <SortableList {...props} />
  }
}

// RootComponent.test.jsx
const rootComponentWrapper = shallow(<RootComponent {...props} />
// The one line PITA to write
const myContainerComponentWrapper = shallow(rootComponentWrapper.get(0)).dive().find(MyContainerComponent);
// validations
expect(myContainerComponentWrapper.length).toBe(3);

Could you please provide some documentation/examples on how to access and manipulate components around SortableContainer and SortableElement?

[clauderic]

You have to use pass {withRef: true} if you want to access a ref to the wrapped component instance:

const SortableList = SortableContainer(({ items }) => {
  return (
    <MyContainerComponent>
      {items.map((value, index) =>
        <SortableItem key={value.name} index={index} value={value} />
      )}
    </MyContainerComponent>
  );
}, {withRef: true});

[Sir4ur0n]

Hi,

Thanks for the hint on withRef option.
Shouldn't this be documented somewhere?

[clauderic]

Definitely! I could've sworn it was documented somewhere, but I guess not. PRs are welcome if you want to contribute to the docs 😄