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

嘲弄反应美丽的dnd与笑话

react-beautiful-dnd jestjs mocking reactjs

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,
}));