Testing react-sortable-hoc with Jest

[artooras]

I'm having trouble understanding how to test react-sortable-hoc components with Jest/Enzyme, although it's fair to say I am extremely amateur at this - perhaps you will be able to help me figure this out and help other newbies in the process.

Here's my Task.test.js code:

import React from 'react'
import ReactDOM from 'react-dom'
import renderer from 'react-test-renderer'
import {shallow, mount} from 'enzyme'
import toJson from 'enzyme-to-json'
import {SortableContainer} from 'react-sortable-hoc'
import Task from './Task'

const TaskList = SortableContainer(() => <ul><Task /></ul>)

it('renders without crashing', () => {
  mount(<TaskList/>)
})

it('should match its empty snapshot', () => {
  const tree = renderer.create(
    <TaskList />
  ).toJSON()
  expect(tree).toMatchSnapshot()
})

And here is the output of the tests:

FAIL  src/components/TaskList/Task/Task.test.js

  ● should match its empty snapshot

    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.componentDidMount (node_modules/react-sortable-hoc/dist/commonjs/SortableHandle/index.js:51:46)
      at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:264:25
      at measureLifeCyclePerf (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:75:12)
      at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:263: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:209:25)
      at ReactTestReconcileTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:156:16)
      at batchedMountComponentIntoNode (node_modules/react-test-renderer/lib/ReactTestMount.js:69:27)
      at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:143:20)
      at Object.batchedUpdates (node_modules/react-test-renderer/lib/ReactDefaultBatchingStrategy.js:62:26)
      at Object.batchedUpdates (node_modules/react-test-renderer/lib/ReactUpdates.js:97:27)
      at Object.render [as create] (node_modules/react-test-renderer/lib/ReactTestMount.js:128:18)
      at Object.<anonymous>.it (src/components/TaskList/Task/Task.test.js:16:44)
      at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
      at process._tickCallback (internal/process/next_tick.js:109:7)


  ✓ renders without crashing (31ms)

  ✕ should match its empty snapshot (9ms)


Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        0.791s, estimated 1s
Ran all test suites related to changed files.

My goal is to actually test the Task component (which is a SortableElement), but if I try to import and use it alone, I get an error saying

Warning: Failed context type: The context `manager` is marked as required in `SortableElement`, but its value is `undefined`

which is why I'm trying to place it in a SortableContainer.

What is the correct way to go about this?

[jonny-no1]

If you want to test your own component in isolation, mock the HOC: https://github.com/clauderic/react-sortable-hoc/issues/193#issuecomment-360098913

[trainoasis]

Late to the party, but still have trouble testing this lol. @foaly-nr1 what you linked to helps indeed, you gotta mock it. The problem that I don't find a solution to still stands though - how to actually write tests that validate the functionality?

For example I've tried

1. rendering the component
2. fireEvent.mouseEnter/mouseOver/mouseMove/mouseDown combination
3. then rerender
4. then check if the order changed - but it never does, so it seems I'm doing something wrong.