Enzyme testing instruction out of date

Describe the bug Writing test with enzyme as stated here will not work http://react-dnd.github.io/react-dnd/docs/testing#testing-with-enzyme

Reproduction

Write a test using enzyme, Try to retrieve the manager

var backend = root
  .instance()
  .getManager()
  .getBackend()

It will fail because instance() will return null with React 16 (Stateless function component don’t have an instance)

Expected behavior The doc should provide the recommanded working way to achieve this.

Workaround I figured something like this, but does feel quite convoluted:

    const mountComponent = (Component: any, testProps: TestProps) => {
        const result: any = { wrapper: undefined, manager: undefined };

        result.manager = new Promise<DragDropManager>(resolve => {
          
            result.wrapper = mount(
                <DndProvider backend={TestBackend}>
                    <DndContext.Consumer>
                        {dnd => {
                            resolve(dnd.dragDropManager);
                        }}
                    </DndContext.Consumer>
                    <Component
                        {...testProps}
                    />
                </DndProvider>,
            );
        });
        return (result: {|
            wrapper: ReactWrapper<DndProvider>,
            manager: Promise<DragDropManager>,
        |});
    };

usage

        let manager: DragDropManager;
        let wrapper;
        let monitor;
        let backend;

        beforeEach(async () => {
            const result = render(MyComponent, {
               /*my props*/
            });
            manager = await result.manager;
            wrapper = result.wrapper;
            monitor = manager.getMonitor();
            backend = (manager.getBackend(): TestBackend);
        });

• OS: MacOS
• Browser: Chrome
• Version : 75
• React: 16.8.6
• React-dnd : 9.3.9

[RuGrof]

How can I get getHandlerId method for my component if it is a stateless function component?

[jkillian]

Found a workaround that might be slightly cleaner than @sandorfr’s above:

First, define this helper for yourself:

  const wrapInTestContext = Component =>
    React.forwardRef((props, ref) => {
      const dragDropManager = useRef();
      useImperativeHandle(ref, () => ({ getManager: () => dragDropManager.current }));

      return (
        <DndProvider backend={TestBackend}>
          <DndContext.Consumer>
            {ctx => {
              dragDropManager.current = ctx.dragDropManager;
            }}
          </DndContext.Consumer>
          <Component {...props} />
        </DndProvider>
      );
    });

Then, you can do something like this in enzyme:

const MyCompWithDnd = wrapInTestContext(MyComp);

const ref = React.createRef();
const enzymeWrapper = mount(<><MyCompWithDnd ref={ref} /></>);

ref.current.getManager(); // now works!

You have to wrap your component in a fragment and use a ref because of an enzyme bug.