React-beautiful-dnd: Updating to 12.0.0 causes Jest to throw DND Draggable warnings

[mattcarlotta]

Expected behavior

No warnings will be thrown.

Actual behavior

When invoking a class method within Jest to simulate the onDragEnd callback, this causes DND to throw warnings:

Unable to find any drag handles in the context "0"

A setup problem was encountered.
Invariant failed: Draggable[id: 5d72dffe65ec39141ae78553]: Unable to find drag handle

Steps to reproduce

1. In Jest, invoke a class method that handles the result of a drag and drop.
2. View console to see warnings.

Suggested solution?

Suppress warnings when in a test environment.

What version of React are you using?

16.8.6 (also tested on 16.11.0)

What version of react-beautiful-dnd are you running?

12.0.0

What browser are you using?

Chrome Version 78.0.3904.97 (Official Build) (64-bit)

Demo

Click the Simulate Jest Test button to see that warnings aren't thrown.
Click on the Tests tab to run the tests. Look at the console to see DND warnings.

[alexreardon]

This is strange - we run all of our tests in Jest

[mattcarlotta]

I agree. Unfortunately, this isn't confined to the codesandbox either. I'm able to replicate it in a web application I'm working on -- again, only in a test environment.

[alexreardon]

Interesting. I'll have a play too

[alexreardon]

It looks like an enzyme + environment setup issue. We currently use enzyme and react-testing-library to test our stuff and we have not run into the issue you are experiencing.

I was able to fix the issue by adding these lines:

let wrapper;
  let root;
  beforeEach(() => {
    root = document.createElement("div");
    root.id = "root";
    document.body.appendChild(root);
    wrapper = mount(<Schedule {...initProps} />, { attachTo: root });
  });

  afterEach(() => {
    document.body.removeChild(root);
  });

I was doing some console.log statements inside a test and found that the document.body was strangely unpopulated. Making it attach to the root seemed to fix it up.

https://codesandbox.io/s/react-dnd-warnings-feyyt

[alexreardon]

Let me know if you want to reopen this

[mattcarlotta]

Thanks for the help. I'm still seeing the warnings when running the tests in your codesandbox, however changing the afterEach to an afterAll seemed to have fixed the warnings in this forked codesandbox. I'll try testing it out in my web application and report back. In the meantime, if this is an enzyme only problem, I can poke them for a fix.

[mattcarlotta]

The above seems to have fixed the issue! Thanks for the help!

[rpearce]

Confirmed this exact same issue with using enzyme's mount and that https://github.com/atlassian/react-beautiful-dnd/issues/1593#issuecomment-552351855 fixes it. :+1:

I don't think you need the root.id = 'root' part, though.

---

Update: If you mount twice in the same file, though, the same problem emerges :(

[rpearce]

@alexreardon It seems the issue still arises if you mount twice in the same file, whether that's in the beforeEach or elsewhere.

Is this something worth looking in to, or would you rather wait for more folks to make noise about it?

---

I'll check back in if I can resolve this, too.

[alexreardon]

PR's welcome @rpearce!

[rpearce]

I gave up and switched to testing r-b-dnd with @testing-library/react. No problems!

[renaudtertrais]

If those warnings doesn't impact your tests result, perhaps just remove them:

// disable all react-beautiful-dnd development warnings
window['__react-beautiful-dnd-disable-dev-warnings'] = true;

[akshaykharche]

If those warnings doesn't impact your tests result, perhaps just remove them:

// disable all react-beautiful-dnd development warnings
window['__react-beautiful-dnd-disable-dev-warnings'] = true;

Not sure where to apply above lines of code.Could you please elaborate it.

[matt-leyrat]

Howdy! I ran into this issue as well (rbd v13.0.0, jest-enzyme ^7.1.2), and this Stackoverflow answer solved it for me.

Adding this snippet to the top of your test file should get rid of the warnings. You can also follow this doc to mock it globally.

jest.mock('react-beautiful-dnd', () => ({
  Droppable: ({ children }) => children({
    draggableProps: {
      style: {},
    },
    innerRef: jest.fn(),
  }, {}),
  Draggable: ({ children }) => children({
    draggableProps: {
      style: {},
    },
    innerRef: jest.fn(),
  }, {}),
  DragDropContext: ({ children }) => children,
}));

[asok-mirror]

I am still having this issue with Jest.