Дразнить декоратора шуткой

Question

Надеюсь, я правильно сформулировал вопросы.

У меня есть приложение react, которое использует react-dnd. В нем у меня есть List компонент, который содержит несколько ListItem компонентов, которые обернуты react-dnd декораторами.

List.js

import React from 'react'
import PropTypes from 'prop-types'
import ListItem from './ListItem'

const propTypes = {
  items: PropTypes.array
}

class List extends React.Component {
  render() {
    return (
      <ul>
        this.props.items.map(item => <ListItem item={item} />)
      </ul>
    )
  }
}

export default List

ListItem.js

import React from 'react'
import PropTypes from 'prop-types'
import {DragSource, DropTarget} from 'react-dnd'

const propTypes = {
  item: PropTypes.string
}

const dragSource = {...}
const dragTarget = {...}
const collectDragSource = (connect, monitor) => (...)
const collectDropTarget = connect => (...)

class ListItem extends React.Component {
  render() {
    return (
      this.props.connectDragSource(
        this.props.connectDropTarget(
          <li>
            {this.props.item}
          </li>
        )
      )
    )
  }
}

export default DropTarget('item', dropTarget, collectDropTarget)(DragSource('item', dragSource, collectDragSource)(ListItem))

Следуя react-dnd библиотеке рекомендациям довольно просто протестировать рендеринг компонента ListItem:

ListItem.test.js

import React from 'react'
import {render} from 'react-testing-library'
import ListItemDnD from '../ListItem'

const ListItem = ListItemDnD.DecoratedComponent // retrieve the original undecorated component

test('ListItem renders', () => {
  const {getByText} = render(
    <ListItem item='item' />
  )
  const listItem = getByText('item')
  expect(listItem).toBeInTheDocument()
})

Однако возникают проблемы при попытке протестировать компонент List:

List.test.js

import React from 'react'
import {render, prettyDOM} from 'react-testing-library'
import List from '../List'

test('List renders', () => {
  const {container, getByText} = render(
    <List items={['item']} />
  )
  const list = container.firstChild
  console.log(prettyDOM(list))
  const listItem = getByText('item')
  expect(listItem).toBeInTheDocument()
})

Утверждение здесь не выполняется, потому что listItem нет. Консоль регистрирует только пустые ul компонента List без li s компонента ListItem. И, очевидно, поскольку я не импортирую ListItem непосредственно в List.test.js, я не могу получить DecoratedComponent здесь.

Итак, как мне это сделать? Могу ли я вместо того, чтобы позволить react-dnd украшать свой компонент, а затем извлекать свой исходный компонент, т. Е., По существу, возвращать украшение, пытаюсь издеваться над самим украшением - отсюда и название вопроса? Если да, то как мне это сделать? Или, альтернативно, возможно, есть более простое решение?