我希望我正确地表达了问题。
我有一个使用react的{{1}}应用程序。在其中，我有一个react-dnd组件，其中有许多List组件，它们被ListItem装饰器包装。
List.js
react-dndListItem.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
在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))
库recommendations之后，测试react-dnd组件的呈现非常简单：
ListItem.test.js
ListItem但是，当我尝试测试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.test.js
List这里的断言失败，因为没有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。而且，很显然，由于我没有直接在ListItem中导入ListItem，所以我在这里无法检索List.test.js。
那么，我该怎么做？我不是要让DecoratedComponent装饰我的组件然后检索我的原始组件（即本质上是还原装饰），而不是尝试模拟装饰本身-因此是问题的标题吗？如果是这样，我该怎么做？或者，也许有一个更简单的解决方案？