React-dnd: Testing with Enzyme rather than React TestUtils

Created on 26 Nov 2017 · 3Comments · Source: react-dnd/react-dnd

I'm getting on with writing some tests, following this documentation and also this issue https://github.com/react-dnd/react-dnd/issues/453

The problem I have is regarding the test rendering.

I can get the example that the documentation gives working, wrapping the component in a DragDropContext and rendering it with TestUtils.renderIntoDocument.

This will return a DragDropContextContainer object.

However, if I try use the Enyzme mount method to render the object, it returns a $$typeof: Symbol(react.element) object - which won't let me get the manager.

I would prefer to use Enzyme - as that's what I'm using for my tests elsewhere.

Anyone got any help with this?

wontfix

Source

dwjohnston

Most helpful comment

Ran into this same problem. I could, and expect you should be able to, fix it using the wrapper.instance() method. Also described here https://github.com/react-dnd/react-dnd/issues/488.

e.g.

const Context = wrapInTestContext(Component)
const wrapper = mount(<Context />)
const manager = wrapper.instance().getManager()
const backend = manager.getBackend()

Additionally, I also needed to get the instances of child components to call getHandlerId().

If it helps, here is one of my test files: https://gist.github.com/gilleswittenberg/142fe49e1115b5a1936562b2284e1ab7

gilleswittenberg on 29 Dec 2017

👍4

All 3 comments

I just got this working, here is what it looks like. in typescript.

import { ThingIAmTesting } from '../file/where/it/lives';
describe('It is a test!', () => {
  let props;
  let component;
  const getComponent = () => {
    let OriginalComponent = (ThingIAmTesting as any).DecoratedComponent;
    let identity = el => el;
    if (!component) {
      component = Enzyme.shallow(
        <OriginalComponent {...props} connectDragSource={identity} />
       );
      return component
    }

    beforeEach (() => {
      props = {
         prop: 'stuff',
         }
      component = undefined;
     })
    it('should render', () => {
      let component = getComponent();
      expect(component).toMatchSnapshot();
    });
})

FreeMasen on 13 Dec 2017

Ran into this same problem. I could, and expect you should be able to, fix it using the wrapper.instance() method. Also described here https://github.com/react-dnd/react-dnd/issues/488.

e.g.

const Context = wrapInTestContext(Component)
const wrapper = mount(<Context />)
const manager = wrapper.instance().getManager()
const backend = manager.getBackend()

Additionally, I also needed to get the instances of child components to call getHandlerId().

If it helps, here is one of my test files: https://gist.github.com/gilleswittenberg/142fe49e1115b5a1936562b2284e1ab7

gilleswittenberg on 29 Dec 2017

👍4

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.