Testing with jsdom and react-testing-library

[lourenci]

Hi. Thanks for the library.

I'm trying to move a Draggable in jsdom with react-testing-library and I'm getting this error:

Do you guys know anything about this error? It looks like something related with css-box-model. It just happens when I try to move the Draggable. All other specs are ok.

fireEvent.keyDown(card, { key: 'Tab', keyCode: 9, which: 9 })
fireEvent.keyDown(card, { key: ' ', keyCode: 32, which: 32 })
fireEvent.keyDown(card, { key: 'ArrowRight', keyCode: 39, which: 39 })
fireEvent.keyDown(card, { key: ' ', keyCode: 32, which: 32 })

I tried to move through mouseMove too.

Thank you.

[alexreardon]

Because we use window.getComputedStyles and element.getBoundingClientRect you will need to mock these DOM apis. Currently jsdom does not support these well.

We do this all over this place in our tests, and here is one example:

https://github.com/atlassian/react-beautiful-dnd/blob/hooks/test/unit/integration/responders-integration.spec.js#L58-L66

[colinrobertbrooks]

@lourenci, did you manage to get this working? I think I'm close, but keep getting:

    console.warn node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.cjs.js:51
    %creact-beautiful-dnd

    %cA screen reader message was trying to be announced but it was unable to do so.
    This can occur if you unmount your <DragDropContext /> in your onDragEnd.
    Consider calling provided.announce() before the unmount so that the instruction will
    not be lost for users relying on a screen reader.
    
    Message not passed to screen reader:
    
    "
    Movement cancelled.
    
    The item has returned to its starting position
    of 1
    
    "

   %c👷‍ This is a development only message. It will be removed in production builds. color: #00C584; 
   font-size: 1.2em; font-weight: bold; line-height: 1.5 color: #723874;

[lourenci]

@colinrcummings I gave up. I mocked the library to return the children and to expose some helpers for some unit tests. You can check it out here: https://github.com/lourenci/react-kanban/blob/master/__mocks__/react-beautiful-dnd.js. Although, this will be a problem for who will use the library (if they want to test it).

The draggable moving itself I tested on Cypress without any big problem. You can check it out here: https://github.com/lourenci/react-kanban/blob/master/cypress/integration/board.spec.js.

[colinrobertbrooks]

Thanks for your response, @lourenci. I actually managed to figure something out with react-testing-library. @alexreardon, I’d be happy to document it. Would you be willing to give it a look if I make a minimal repo?

[lourenci]

@colinrcummings I gave up struggling against jsdom issues. I'm looking forward to see your repo, I use react-testing-library too.

[colinrobertbrooks]

@lourenci, that was the hard part. I'll put the repo together early this week; hopefully it can be useful for issue #623, @alexreardon.

[colinrobertbrooks]

@lourenci, I wrapped my approach in react-beautiful-dnd-test-utils. It currently supports moving a <Draggable /> n positions up or down inside a <Droppable />, which was my use case. Also see react-beautiful-dnd-test-utils-example, which includes an example test. Let me know what you think. cc: @alexreardon