Mocking react-beautiful dnd with Jest

Question

使用react-beautiful-dnd hasn't been defined yet测试组件的推荐方法。然而，这在某种程度上阻碍了我。

我可以使用react-beautiful-dnd测试我的组件，方法是按照this recommendation将它们包装在DragDropContext中

import React from 'react'
import {render} from 'react-testing-library'
import {DragDropContext} from 'react-beautiful-dnd'

import List from '../List'

describe('List', () => {

  it('renders', () => {
    const title = 'title'
    const {container, getByText} = render(
      <DragDropContext onDragEnd={() => {}}>
        <List>
          <li>{title}</li>
        </List>
      </DragDropContext>
    )
    expect(container.firstChild).toBeInTheDocument()
    expect(getByText(title)).toBeInTheDocument()
  })
})

然而，这似乎是一种次优的方法。取而代之的是，我想模拟react-beautiful-dnd，但我不知道如何正确地这样做。

比方说，如果我的List组件包装在Droppable中，如下所示：

return (
  <Droppable droppableId='id'>
    {provided =>
      <ListContainer 
        ref={provided.innerRef}
        {...provided.droppableProps}
      >
        {children}
        {provided.placeholder}
      </ListContainer>
    }
  </Droppable>
)

如何使用render prop方法( Droppable可以做到这一点)为组件编写模拟？

jest.mock('react-beautiful-dnd', () => ({
  Droppable: props => props.children()
}))

上面的方法适用于higher-order component。如何将其更改为适用于实现render prop的组件

Answer 1

通过实现以下代码，我能够为我们的库模拟react-beautiful-dnd：

jest.mock('react-beautiful-dnd', () => ({
  Droppable: ({ children }) => children({
    draggableProps: {
      style: {},
    },
    innerRef: jest.fn(),
  }, {}),
  Draggable: ({ children }) => children({
    draggableProps: {
      style: {},
    },
    innerRef: jest.fn(),
  }, {}),
  DragDropContext: ({ children }) => children,
}));