wojtekmaj / enzyme-adapter-react-17

I was attempting to run a test where we simulate a drag event on the page to make sure an upload region shows up. I get this error every time:

FAIL  src/pages/__test__/TestPage.test.tsx (11.299 s)
  TestPage
    ✕ drag event shows the upload region (52 ms)

  ● TestPage › drag event shows the upload region

    TypeError: Cannot read property '__reactFiber$ul8w880oi5m' of null

       9 |
      10 |     act(() => {
    > 11 |       wrapper.simulate('dragenter')
         |               ^
      12 |     })
      13 |
      14 |     expect(wrapper.find(UploadRegion).exists())

      at getInstanceFromNode (../../node_modules/react-dom/cjs/react-dom.development.js:10661:18)
      at eventFn (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:2061:22)
      at fn (../../node_modules/@wojtekmaj/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js:498:11)
      at ../../node_modules/@wojtekmaj/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js:360:37
      at batchedUpdates$1 (../../node_modules/react-dom/cjs/react-dom.development.js:22380:12)
      at Object.act (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
      at wrapAct (../../node_modules/@wojtekmaj/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js:360:13)
      at Object.simulateEvent (../../node_modules/@wojtekmaj/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js:497:9)
      at ReactWrapper.call (../../node_modules/enzyme/src/ReactWrapper.js:666:22)
      at ReactWrapper.single (../../node_modules/enzyme/src/ReactWrapper.js:1170:21)
      at ReactWrapper.simulate (../../node_modules/enzyme/src/ReactWrapper.js:665:17)
      at src/pages/__test__/TestPage.test.tsx:11:15
      at batchedUpdates$1 (../../node_modules/react-dom/cjs/react-dom.development.js:22380:12)
      at act (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
      at Object.<anonymous> (src/pages/__test__/TestPage.test.tsx:10:8)
      at TestScheduler.scheduleTests (../../node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (../../node_modules/@jest/core/build/runJest.js:404:19)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        12.167 s

TestPage.test.tsx:

import { UploadRegion } from '@athena_docmgr/ui'
import { mount } from 'enzyme'
import { act } from 'react-dom/test-utils'
import { TestPage } from '../TestPage'

describe('TestPage', (): void => {
  it('drag event shows the upload region', async () => {
    const wrapper = mount(<TestPage />)

    act(() => {
      wrapper.simulate('dragenter')
    })

    expect(wrapper.find(UploadRegion).exists())

    wrapper.unmount()
  })
})

TestPage.tsx:

import { FunctionComponent } from 'react'

export const TestPage: FunctionComponent = () => {
  return (
    <>
      <></>
      <></>
      <div>Some text</div>
    </>
  )
}

Of course that's not really what we're using, but the components for our page render that way, since we use a couple of components that either render empty fragments or nulls in certain cases.

It seems like this is a bug with nodeToHostNode in ReactSeventeenAdapter where the code assumes that if there is an array, we want the first element. See

enzyme-adapter-react-17/src/ReactSeventeenAdapter.js

Line 802 in 89f0731

return nodes[0];

However, in my case, the first two elements are null, and the 3rd is the one we want. So, it seems like if we filter out null values by using nodes.filter(Boolean)[0], my error is fixed and the problem goes away.