Question

我正在使用Jest和Enzyme来测试驱动我对React开发的学习，制作了一个待办事项列表应用程序；它有一个TodoList组件（父组件）和Todo组件（子组件）。

我所有的测试都通过了绿色测试，但有一次通过：我正在尝试测试一个删除处理程序，该处理程序作为prop函数传递给Todo个孩子。

我在Todo方面通过了测试；它调用删除处理程序prop函数。但是，当涉及到父项时，它会从状态/列表中删除，但是我在编写绊脚石测试时遇到了麻烦。

TodoList父组件具有一个deleteHandler函数，该函数带有一个id并处理实际的删除表单状态而没有问题。

TodoList：


class TodoList extends Component {
  constructor() {
    super()

    this.state = {
      task: '',
      items: [],
      lastUsedId: 1
    }
  }

  handleDelete = index => {
    this.setState({
      ...this.state,
      items: this.state.items.filter((item, idx) => idx !== index)
    })
  }

TodoList.test.js：

describe('when deleting an existing item', () => {

    const todoList = mount(<TodoList />)

    const newItem = 'Sell my Xbox One'
    todoList.find('#new-item-title').simulate('change', { target : { value: newItem } })
    todoList.find('#btn-add-item').simulate('submit', { preventDefault: () => {} })

    todoList.find('.btn-delete-item').simulate('click')

    it('is delete from the state', () => {
      expect(todoList.state('items')).toEqual([])
    })

    it('is deleted from the page', () => {
      expect(todoList.children().find('li').exists()).toBe(false)
    })
  })

在带有Jest和酶的React中测试父组件的Prop函数

0 个答案: