0

I am trying to write test for a component that uses react-beautiful-dnd with React Testing Library and Jest. Getting this error:

TypeError: Cannot read properties of undefined (reading 'droppable')

Component looks like this

import {useEffect, useState} from "react";
import type {DropResult} from "react-beautiful-dnd";
import {DragDropContext, Draggable, Droppable} from "react-beautiful-dnd";
........

interface Props {
    ......
}



export function Wrapper(props: Props): JSX.Element {
    .....
    
    useEffect(() => {
       .....
    }, [...]);

   

    return (
        <section>
            <DragDropContext onDragEnd={onDragEnd}>
                <Droppable droppableId="strength" direction="horizontal">
                    {provided => (
                        <div
                            ref={provided.innerRef}
                            >
                            {data.map((strength, index) => (
                                <Draggable
                                    key={`drag-${some.id}`}
                                    draggableId={`drag-${some.id}`}
                                    index={index}>
                                    {provided => (
                                        <Component
                                            provided={provided}
                                            key={some.id}
                                            something={some}
                                            editMode={editMode}
                                            onDelete={onDelete}
                                            onUpdate={onUpdate}
                                        />
                                    )}
                                </Draggable>
                            ))}
                            {provided.placeholder}
                        </div>
                    )}
                </Droppable>
            </DragDropContext>
            )}
        </section>
    );
}

Test look like this:

describe("Some component tests", () => {
    
    ........
    test("Passed strength as props is rendered", async () => {
        const some = [{ 
            id: 1,
            cid: 1,
            position: 1,
            name: "some name",
            draft: false,
         },
        {
            id: 2,
            cid: 1,
            position: 2,
            name: "some name 2",
            draft: false,
        }];

        render(
            <StrengthsWrapper
                editMode={true}
                curriculum_id={1}
                toggleVisible={true}
                strengths={strengths}
                setToggleVisible={() => null}
                setUpdatedAt={() => null}
                setMessage={() => null}
            />,
        );
        
        const some = screen.getByText("some name");
        expect(some).toBeInTheDocument();
    });
});

Error:

TypeError: Cannot read properties of undefined (reading 'droppable')

      45 |         }];
      46 |
    > 47 |         render(
         |         ^
      48 |             <Wrapper
      49 |                 editMode={true}
      50 |                 curriculum_id={1}

      at useDroppablePublisher (node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.cjs.js:7408:68)
      at Droppable (node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.cjs.js:8288:3)
      at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
      at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:19049:16)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
      at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:3994:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4056:31)
      at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23964:7)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22779:12)
      at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22707:5)
      at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:22670:7)
      at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:22293:18)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21881:7)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:25482:3)
      at node_modules/react-dom/cjs/react-dom.development.js:26021:7
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:22431:12)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:26020:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:26103:10)
      at node_modules/@testing-library/react/dist/pure.js:101:25
      at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:22380:12)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
      at render (node_modules/@testing-library/react/dist/pure.js:97:26)
      at Object.<anonymous> (src/tests/Some.test.tsx:47:9)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:404:19)
reemwn
  • 17
  • 1

0 Answers0