Testing with Enzyme


#1

I have a React UI component with an React-Boostrap form and I am trying to simulate the submit event.

//Component
<Form onSubmit={this.submitFunction.bind(this)>
...
</Form>

//Test
const wrapper = shallow(<Component ...props />);

wrapper.find('Form').simulate('submit');

However I am getting this error:

Invariant Violation: Element appears to be neither ReactComponent nor DOMNode (keys: value)
    at invariant (packages/modules.js?hash=d51ee07ca8222842dd7750b5a9e777555190f9c3:20948:15)
    at Object.findDOMNode (packages/modules.js?hash=d51ee07ca8222842dd7750b5a9e777555190f9c3:20044:54)
    at ProductEdit.saveProduct (app/app.js?hash=15f7ad32bef651f9e9e7b4dde08eb531635ce4dd:230:47)
    at Object.invokeGuardedCallback [as invokeGuardedCallbackWithCatch] (packages/modules.js?hash=d51ee07ca8222842dd7750b5a9e777555190f9c3:6443:12)
    at executeDispatch (packages/modules.js?hash=d51ee07ca8222842dd7750b5a9e777555190f9c3:6265:21)
    at Object.executeDispatchesInOrder (packages/modules.js?hash=d51ee07ca8222842dd7750b5a9e777555190f9c3:6290:5)
    at executeDispatchesAndRelease (packages/modules.js?hash=d51ee07ca8222842dd7750b5a9e777555190f9c3:5726:22)
    at executeDispatchesAndReleaseSimulated (packages/modules.js?hash=d51ee07ca8222842dd7750b5a9e777555190f9c3:5734:10)
    at forEachAccumulated (packages/modules.js?hash=d51ee07ca8222842dd7750b5a9e777555190f9c3:6598:8)
    at Object.processEventQueue (packages/modules.js?hash=d51ee07ca8222842dd7750b5a9e777555190f9c3:5897:7)

Anyone experiencing the same?


#2

I’ve found that the problem is related to how I recover values from React-Bootstrap components.

Appartently using ReactDOM.findDOMNode(nameRef).value, is not appropriate.


#3

I don’t think .find() will look for component names. It acts like traditional jQuery selectors, so you can look for #ids and .classes, or any arguments that are valid for document.querySelector.


#4

I started this issue in Enzyme’s github: https://github.com/airbnb/enzyme/issues/479#issuecomment-229705790

Apparently the problem is related with the way I add values to the input in the form. Due to the use of the FormControl, it is difficult to access the input and give it a value.

Any ideas?


#5

That looks a little above my head, sorry! I still don’t have both feet in unit testing just yet.