代码之家  ›  专栏  ›  技术社区  ›  artooras

嘲弄反应美丽的dnd与笑话

  •  0
  • artooras  · 技术社区  · 7 年前

    使用 react-beautiful-dnd hasn't been defined yet . 不过,这有点妨碍了我。

    我可以使用 反应漂亮的dnd 把它们包起来 DragDropContext this recommendation :

    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()
      })
    })
    

    然而,这似乎是一种次优方法。相反,我想嘲笑 反应漂亮的dnd ,但我不知道该怎么做。

    说,如果我 List 组件包装在 Droppable 就像这样:

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

    如何使用 render prop 接近(哪个 是吗?

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

    上面的方法对 higher-order component 渲染道具 ?

    0 回复  |  直到 7 年前
        1
  •  6
  •   Jon Sakas    7 年前

    我可以嘲笑 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,
    }));