React-beautiful-dnd: (Jest/Enzyme without Redux) private-react-beautiful-dnd-key-do-not-use-store

[sambokai]

I'm not using Redux for this project. How can i pass this "private-react-beautiful-dnd-key-do-not-use-store" prop?

I'm on react-beautiful-dnd version 7.1.3.

Thank you very much.

NoteSelectionList.test.jsx

import React from 'react';
import shallow from 'enzyme';
import renderer from 'react-test-renderer';

import NoteSelectionList from './NoteSelectionList';

describe('<NoteSelectionList />', () => {
  const mockData = {
    notes: [
      { body: 'This is Note 1', id: 1, lastChange: Date.UTC(2018, 1, 1) },
      { body: 'This is Note 2', id: 2, lastChange: Date.UTC(2018, 1, 2) },
      { body: 'This is Note 3', id: 3, lastChange: Date.UTC(2018, 1, 3) },
    ],
  };

  it('renders correctly', () => {
    const tree = renderer
      .create(<NoteSelectionList
        notes={mockData.notes}
        onSelectNote={() => {}}
        selectedNote={0}
      />)
      .toJSON();

    expect(tree).toMatchSnapshot();
  });
});

Stacktrace when running the above test:

Invariant Violation: Could not find "private-react-beautiful-dnd-key-do-not-use-store" in either the context or props of "Connect(Droppable)". Either wrap the root component in a <Provider>, or explicitly pass "private-react-beautiful-dnd-key-do-not-use-store" as a prop to "Connect(Droppable)".
    at invariant (/Users/sbokai/Developer/Learning/React/basic_todo/node_modules/invariant/invariant.js:40:15)
    at new Connect (/Users/sbokai/Developer/Learning/React/basic_todo/node_modules/react-redux/lib/components/connectAdvanced.js:134:33)
    at constructClassInstance (/Users/sbokai/Developer/Learning/React/basic_todo/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2364:20)
    at updateClassComponent (/Users/sbokai/Developer/Learning/React/basic_todo/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3899:9)
    at beginWork (/Users/sbokai/Developer/Learning/React/basic_todo/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4545:16)
    at performUnitOfWork (/Users/sbokai/Developer/Learning/React/basic_todo/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7377:16)
    at workLoop (/Users/sbokai/Developer/Learning/React/basic_todo/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7406:26)
    at renderRoot (/Users/sbokai/Developer/Learning/React/basic_todo/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7437:9)
    at performWorkOnRoot (/Users/sbokai/Developer/Learning/React/basic_todo/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8012:24)
    at performWork (/Users/sbokai/Developer/Learning/React/basic_todo/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7933:9)
    at performSyncWork (/Users/sbokai/Developer/Learning/React/basic_todo/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7910:5)
    at requestWork (/Users/sbokai/Developer/Learning/React/basic_todo/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7810:7)
    at scheduleWorkImpl (/Users/sbokai/Developer/Learning/React/basic_todo/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7685:13)
    at scheduleWork (/Users/sbokai/Developer/Learning/React/basic_todo/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7645:12)
    at scheduleRootUpdate (/Users/sbokai/Developer/Learning/React/basic_todo/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8273:5)
    at updateContainerAtExpirationTime (/Users/sbokai/Developer/Learning/React/basic_todo/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8301:12)
    at Object.updateContainer (/Users/sbokai/Developer/Learning/React/basic_todo/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8328:14)
    at Object.create (/Users/sbokai/Developer/Learning/React/basic_todo/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9009:18)
    at Object.<anonymous> (/Users/sbokai/Developer/Learning/React/basic_todo/src/js/components/noteslist/NoteSelectionList.test.jsx:18:8)
    at Object.asyncFn (/Users/sbokai/Developer/Learning/React/basic_todo/node_modules/jest-jasmine2/build/jasmine_async.js:82:37)
    at resolve (/Users/sbokai/Developer/Learning/React/basic_todo/node_modules/jest-jasmine2/build/queue_runner.js:52:12)
    at new Promise (<anonymous>)
    at mapper (/Users/sbokai/Developer/Learning/React/basic_todo/node_modules/jest-jasmine2/build/queue_runner.js:39:19)
    at promise.then (/Users/sbokai/Developer/Learning/React/basic_todo/node_modules/jest-jasmine2/build/queue_runner.js:73:82)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:160:7)

[sambokai]

So, since i wrapped the entire App in a DragAndDropContext, i figured that this was what the test needed - and it did. Looks kind of weird to wrap every single tested component in a DragAndDropContexts, but it's fine by me if theres no better way. Is this the way to go?

Thanks! :)

[sambokai]

What i get now is this:

 PASS  src/js/components/noteslist/NoteSelectionList.test.jsx
  <NoteSelectionList />
    ✓ renders correctly (40ms)

  console.error node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.cjs.js:4696

            Droppable has not been provided with a ref.
            Please use the DroppableProvided > innerRef function


Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 passed, 1 total
Time:        1.164s
Ran all test suites.

The Component's render function (NoteSelectionList.jsx):

render() {
    const filteredNotes = this.props.notes
      .filter(note => note.body.toLowerCase().includes(this.state.searchQuery.toLowerCase()));

    return (
      <div>
        <NotesListFilterSearch onUpdateSearchQuery={this.handleSearchQueryUpdate} />
        <Droppable droppableId="notesListDroppable">
          {droppableProvided => (
            <div className="list-group" ref={droppableProvided.innerRef}>
              {/* eslint-disable jsx-a11y/anchor-is-valid */}
              {filteredNotes.map((note, index) =>
                (
                  <Draggable draggableId={note.id} key={note.id} index={index}>
                    {(draggableProvided, draggableSnapshot) => (
                      <a
                        ref={draggableProvided.innerRef}
                        {...draggableProvided.draggableProps}
                        {...draggableProvided.dragHandleProps}
                        href="#"
                        className={`flex-column align-items-center list-group-item list-group-item-action px-2 ${(this.props.selectedNote === index) && !draggableSnapshot.isDragging ? 'active' : ''} ${note.body ? '' : 'disabled font-weight-light bg-secondary text-white'}`}
                        onClick={() => this.handleNoteSelection(index)}
                      >
                        <div className="d-flex w-100 align-items-center justify-content-between">
                          <p id="note-list-item-title" className="text-truncate pr-2 mb-0">{this.getNoteTitle(note.body)}</p>
                          <small >
                            {NoteSelectionList.getRelativeCalendarDate(note.lastChange)}
                          </small>
                        </div>
                      </a>)}
                  </Draggable>
                ))
              }
              {droppableProvided.placeholder}
            </div>)}
        </Droppable>
      </div>
    );
  }

What am i doing wrong? The innerref is there. It works on build. It's the tests that give me problems. :/

[ramiel]

Have you solved this? How did you do?

[sebald]

@ramiel You need to wrap the components in their respective provider (<DragDropContext>).

[nicotroia]

If anyone is still looking you can try this

jest.mock('react-beautiful-dnd', () => ({
  Droppable: jest.fn(
    // params to children are `provider`, `snapshot`
    ({children}) => children({}, {})
  )
}));

[shruti8789]

If anyone is still looking you can try this

jest.mock('react-beautiful-dnd', () => ({
  Droppable: jest.fn(
    // params to children are `provider`, `snapshot`
    ({children}) => children({}, {})
  )
}));

how do i import jest?