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

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

0 голосов
/ 22 ноября 2018

Рекомендуемый подход к тестированию компонентов с использованием 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?

1 Ответ

0 голосов
/ 19 июня 2019

Я смог смоделировать 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,
}));
...