React-sortable-hoc: Snapshot testing issue with react-test-renderer

[robcaldecott]

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?

[eisenbergrobin]

See https://github.com/clauderic/react-sortable-hoc/issues/157, withRef might be what you are looking for.

[robcaldecott]

This gives the same error. Perhaps it's a limitation of react-test-renderer.

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

[clauderic]

This is a known issue with ReactTestRenderer, it does not work with refs or ReactDOM.findDOMNode, check out https://github.com/facebook/react/issues/7371 for more details.

[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;

[mrchief]

@foaly-nr1 You're a life saver!

[lmadigan]

Hi @foaly-nr1, could you elaborate briefly on how you would use these mocks. In the example above would you recommend importing the mock file into the test page?

I have a component that I want to test that calls SortableElement within in. When testing it, I've tried wrapping it in a mock but this doesn't seem to do the trick. Sorry in advance if this is a newbie question.

[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.