clauderic / clauderic/react-sortable-hoc

Testing react-sortable-hoc with Jest

Open
#268 2 comments 13 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
10.9k
Forks
959
PR merge metrics
No merged PRs in 30d

Description

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(() =>

    )

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

    it('should match its empty snapshot', () => {
    const tree = renderer.create(

    ).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..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?

    Contributor guide

    No contributing guide indexed for this repository

    Assessment

    This issue has not been assessed yet.

    Get new issues in your inbox

    A short digest of beginner-friendly GitHub issues.