React Beautiful DND- Uncaught RbdInvariant {message: 'Invariant failed: Could not find required context'}

Question

I have a component in React that uses react-beautiful-dnd. This component renders a list of items that can be dragged. Here is the code for this component-

const LeftPanelForTables = (props: LeftPanelForTablesProps) => {
    const { items } = props;
    return items.map((item: any, index: number) => (
        <Draggable
            key={item.id}
            draggableId={item.id}
            index={index}
        >
            {(provided, snapshot) => (
                <div
                    className={cx(styles.table)}
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                >
                    <div className={cx(styles.table_parent)}>
                        <Typography
                            variant={'p'}
                            className={styles.tableText}
                        >
                            {item.name}
                        </Typography>
                    </div>
                </div>
            )}
        </Draggable>
    ));
};

export default LeftPanelForTables;

This code runs properly without any error and produces the desired output.

Now I am writing a unit test for this code.

describe('LeftPanelForTables', () => {
    const items = [
        { id: '1', name: 'Table 1', isSelected: false },
        { id: '2', name: 'Table 2', isSelected: true },
    ];

    it('renders the table items correctly', () => {
        const { container, getByText } = render(
            <DragDropContext onDragEnd={(result:DropResult)=>{}}>
                <LeftPanelForTables items={items} />
            </DragDropContext>
        );

        // Check if both table names are rendered
        expect(getByText('Table 1')).toBeInTheDocument();
        expect(getByText('Table 2')).toBeInTheDocument();
    });
});

The test fails with below error-
Error: Uncaught [Error: Error: Uncaught RbdInvariant { message: 'Invariant failed: Could not find required context' }

score 0 · Answer 1 · answered Jun 22 '23 at 14:18

In my test file, I had to wrap the <LeftPanelForTables> component within <Droppable> imported from react-beautiful-dnd.

Here is a gif that explains the component hierarchy in react-beautiful-dnd-

In my code, since the <LeftPanelForTables> contains a <Draggable>, we need to wrap it inside a <Droppable> and the <Droppable> should be wrapped inside <DragDropContext>.

So here is my new test file-

describe('LeftPanelForTables', () => {
    const items = [
        { id: '1', name: 'Table 1', isSelected: false },
        { id: '2', name: 'Table 2', isSelected: true },
    ];

    it('renders the table items correctly', () => {
        const { container, getByText } = render(
            <DragDropContext onDragEnd={(result:DropResult)=>{}}>
                <Droppable droppableId="droppable" isDropDisabled={true}>
                    {(provided: any, snapshot: any) => (
                        <div ref={provided.innerRef}>
                            <LeftPanelForTables items={items} />
                        </div>
                    )}
                </Droppable>
            </DragDropContext>
        );

        // Check if both table names are rendered
        expect(getByText('Table 1')).toBeInTheDocument();
        expect(getByText('Table 2')).toBeInTheDocument();
    });
});

Chloe Harper · Answer 2 · 2023-06-22T13:04:54.727

-1

try wrapping your component with the DragDropContextProvider from react-beautiful-dnd.

describe('LeftPanelForTables', () => {
  const items = [
    { id: '1', name: 'Table 1', isSelected: false },
    { id: '2', name: 'Table 2', isSelected: true },
  ];

  it('renders the table items correctly', () => {
    const { container, getByText } = render(
      <DragDropContext onDragEnd={(result) => {}}>
        <DragDropContextProvider> {/* Add DragDropContextProvider */}
          <LeftPanelForTables items={items} />
        </DragDropContextProvider>
      </DragDropContext>
    );

    expect(getByText('Table 1')).toBeInTheDocument();
    expect(getByText('Table 2')).toBeInTheDocument();
  });
});

Make sure to import DragDropContextProvider

edited Jun 22 '23 at 13:04

answered Jun 22 '23 at 13:04

Chloe Harper

28
4

`react-beautiful-dnd` has no exported member named `DragDropContextProvider` – Abhinandan Kushwaha Jun 22 '23 at 13:08
2

Most or all of your (currently) 19 answers (and most all of your comment replies as well) appear likely to have been entirely or partially written by AI (e.g., ChatGPT), and **far** too many of the ones I've checked so far appear to have errors that have been pointed out in the comments. Please be aware that [posting of AI-generated content is banned here](//meta.stackoverflow.com/q/421831). If you used an AI tool to assist with any answer, I would encourage you to delete it. Thanks! – NotTheDr01ds Jun 26 '23 at 21:50
1

**Readers should review this answer carefully and critically, as AI-generated information often contains fundamental errors and misinformation.** If you observe quality issues and/or have reason to believe that this answer was generated by AI, please leave feedback accordingly. The moderation team can use your help to identify quality issues. – NotTheDr01ds Jun 26 '23 at 21:50

React Beautiful DND- Uncaught RbdInvariant {message: 'Invariant failed: Could not find required context'}

2 Answers2