Downshift: While testing, simulating sending keys to the input child of `Downshift` results in a error.

[mayk93]

• downshift version: 2.0.10
• node version: v9.11.1
• npm (or yarn) version: 5.6.0
• react version: 16.4.1
• jest version: 20.0.4

Relevant code or config

ComponentBuiltWithDownshift = props => (
    <Downshift {...props} />
        <TextField {...getInputProps()} />
        <List>{options.map()}</List>
    </Downshift>
)

wrapper = mount(<ComponentBuiltWithDownshift />)
wrapper.find(TextField).simulate('keyDown', { keyCode: 40 })

What you did:

I built a component with Downshift. I want to test this component now.
The test checks that autocomplete suggestions are not rendered initially but are rendered once input is sent.

What happened:

When I send input with jest, I get a downshift related message.

    TypeError: Cannot read property 'indexOf' of undefined

      at normalizeArrowKey (node_modules/downshift/dist/downshift.cjs.js:1166:45)
      at input_handleKeyDown (node_modules/downshift/dist/downshift.cjs.js:1996:15)
      at node_modules/downshift/dist/downshift.cjs.js:1020:16
          at Array.some (<anonymous>)
      at node_modules/downshift/dist/downshift.cjs.js:1019:16
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:100:14)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:219:27)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:126:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:36:27)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:61:35)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:138:16)
      at Object.invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:187:29)
      at Object.invokeGuardedCallbackAndCatchFirstError (node_modules/react-dom/cjs/react-dom.development.js:201:43)
      at executeDispatch (node_modules/react-dom/cjs/react-dom.development.js:461:19)
      at executeDispatchesInOrder (node_modules/react-dom/cjs/react-dom.development.js:483:5)
      at executeDispatchesAndRelease (node_modules/react-dom/cjs/react-dom.development.js:581:5)
      at executeDispatchesAndReleaseSimulated (node_modules/react-dom/cjs/react-dom.development.js:589:10)
      at forEachAccumulated (node_modules/react-dom/cjs/react-dom.development.js:562:8)
      at Object.runEventsInBatch (node_modules/react-dom/cjs/react-dom.development.js:721:5)
      at node_modules/react-dom/cjs/react-dom-test-utils.development.js:1002:22
      at Object.batchedUpdates$1 [as unstable_batchedUpdates] (node_modules/react-dom/cjs/react-dom.development.js:16659:12)
      at node_modules/react-dom/cjs/react-dom-test-utils.development.js:998:14
      at Object.simulateEvent (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:252:15)
      at ReactWrapper.<anonymous> (node_modules/enzyme/build/ReactWrapper.js:868:29)
      at ReactWrapper.single (node_modules/enzyme/build/ReactWrapper.js:1534:25)
      at ReactWrapper.simulate (node_modules/enzyme/build/ReactWrapper.js:867:14)
      at Object.it (src/components/MyComponent/MyComponent.spec.js:60:39)
          at new Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:182:7)

Reproduction repository:

Problem description:

Simulating sending keys to the input child of Downshift results in a error.

Suggested solution:

[stipsan]

Hey! It looks like you're using enzyme 🙂

The error is thrown here: https://github.com/paypal/downshift/blob/01b7dad511d73a2aff5c09792ee9b983ae668bb9/src/utils.js#L233-L235

This means that enzyme is not providing event.key. Using simulate in enzyme is a bit misleading, it sounds like it simulates events but it's in fact not.

I highly recommend you try out this library for cases like this: https://github.com/kentcdodds/react-testing-library#fireeventnode-htmlelement-event-event
As it fires real DOM events, allowing you to write more resilient and accurate tests.

For more advanced tests that simulate what your users would do in your app I recommend giving Cypress a go: https://www.cypress.io/

[kentcdodds]

I'm pretty sure all you need to do is provide a key in addition to the keyCode (which I think you would have to do with react-testing-library as well).

[kentcdodds]

I think we're good here 👍