Насмешливая реакция-красавица с Джестом

Question

Рекомендуемый подход к тестированию компонентов с использованием react-beautiful-dnd еще не определено. Тем не менее, это несколько блокирует меня.

Я могу проверить свои компоненты, используя react-beautiful-dnd оборачивая их в 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,
}));