Snapshot testing issue with react-test-renderer

I am trying to write a snapshot test using jest/react-test-renderer but it appears to be incompatible with react-sortable-hoc. I am using one of your samples:

import React, { Component } from "react";
import {
  SortableContainer,
  SortableElement,
  arrayMove
} from "react-sortable-hoc";

const SortableItem = SortableElement(({ value }) => <li>{value}</li>);

const SortableList = SortableContainer(({ items }) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortableComponent extends Component {
  state = {
    items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"]
  };
  onSortEnd = ({ oldIndex, newIndex }) => {
    this.setState({
      items: arrayMove(this.state.items, oldIndex, newIndex)
    });
  };
  render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
}

export default SortableComponent;

And my test looks like this:

import React from "react";
import App from "./App";
import renderer from "react-test-renderer";

it("renders", () => {
  const component = renderer.create(<App />);
  expect(component).toMatchSnapshot();
});

But I receive the following error:

    Invariant Violation: getNodeFromInstance: Invalid argument.

      at invariant (node_modules\fbjs\lib\invariant.js:44:15)
      at Object.getNodeFromInstance (node_modules\react-dom\lib\ReactDOMComponentTree.js:162:77)
      at findDOMNode (node_modules\react-dom\lib\findDOMNode.js:49:41)
      at _class.setDraggable (node_modules\react-sortable-hoc\dist\commonjs\SortableElement\index.js:99:58)
      at _class.componentDidMount (node_modules\react-sortable-hoc\dist\commonjs\SortableElement\index.js:62:16)
      at node_modules\react-test-renderer\lib\ReactCompositeComponent.js:265:25
      at measureLifeCyclePerf (node_modules\react-test-renderer\lib\ReactCompositeComponent.js:75:12)
      at node_modules\react-test-renderer\lib\ReactCompositeComponent.js:264:11
      at CallbackQueue.notifyAll (node_modules\react-test-renderer\lib\CallbackQueue.js:76:22)
      at ReactTestReconcileTransaction.close (node_modules\react-test-renderer\lib\ReactTestReconcileTransaction.js:36:26)
      at ReactTestReconcileTransaction.closeAll (node_modules\react-test-renderer\lib\Transaction.js:206:25)
      at ReactTestReconcileTransaction.perform (node_modules\react-test-renderer\lib\Transaction.js:153:16)
      at batchedMountComponentIntoNode (node_modules\react-test-renderer\lib\ReactTestMount.js:69:27)
      at ReactDefaultBatchingStrategyTransaction.perform (node_modules\react-test-renderer\lib\Transaction.js:140:20)
      at Object.batchedUpdates (node_modules\react-test-renderer\lib\ReactDefaultBatchingStrategy.js:62:26)

I think this is either a ref issue or perhaps some issue with stateless functional components. Any ideas?

[foaly-nr1]

As I want to unit test my own component and the HOC is tested separately, I simply mock the HOC:

// /__mocks__/react-sortable-hoc.js

export const SortableContainer = component => component;
export const SortableElement = component => component;
export const SortableHandle = component => component;

[foaly-nr1]

@lmadigan save it in the file /__mocks__/react-sortable-hoc.js and Jest should automatically apply the mock for you. That’s at least what happened a year ago.