在 react.js、jest、enzyme 中模拟一个简单的函数

Question

我是 React 测试的新手，正在构建一个简单的待办事项应用程序。我正在努力模拟列表组件中的删除功能。

目前我的测试是这样的

  it('deletes an item from the list', () => {
    const deleteItem = jest.fn();
    const items = [{body: "New note", id: "12345"}]
    const textEl = wrapper.find("#text-output p")
    wrapper = shallow(<ListItems list={items} deleteItem={deleteItem}/>)
    wrapper.find('#delete').simulate('click')
    expect(textEl.text()).toContain("//Should be empty")
  })

目前我运行测试错误读取..

Expected substring: "//Should be empty"
Received string:    "New note X"

应用程序工作正常，但我在测试中没有正确模拟删除功能，因为“新笔记”仍在通过。我做错了什么？

为了以防万一，这是我正在测试的文件..

function ListItems(props) {
   const list = props.list
    const displayItems = list.map((item, index) => 
    {
      return <div id='text-output' key={index}>
            <p>
              {item.body } 
              &nbsp;
              <button
              id="delete"
              onClick={ () => props.deleteItem(item.id)}>
                X
              </button>
            </p>
        </div>
    })
  return(
  <div>
    <h1>This is the list</h1>
    {displayItems}
  </div>
  )
}

任何帮助都会很棒！

Answer 1

在你的测试中，因为你模拟了 deleteItem 回调，它 实际上 从 items 对象中删除了一个项目传递给 list 道具。此外，const textEl = wrapper.find("#text-output p") before wrapper = shallow(<ListItems list={items} deleteItem={deleteItem}/>) 可能也不会按预期工作。

你可以然而，而是断言 deleteItem 模拟是用指定的项目 ID 调用的。 TBH，这就是测试应该是什么，因为被测组件似乎没有任何逻辑除了呈现项目列表并附加 onClick 回调。

.toHaveBeenCalledWith

it('should invoke deleteItem callback on button click with item id', () => {
  const deleteItemMock = jest.fn();
  const items = [{body: "New note", id: "12345"}];

  wrapper = shallow(<ListItems list={items} deleteItem={deleteItemMock}/>);
  wrapper.find('#delete').simulate('click');

  expect(deleteItemMock).toHaveBeenCalledWith("12345");
});

在 react.js、jest、enzyme 中模拟一个简单的函数

Mocking a simple function in react.js, jest, enzyme

reactjs

unit-testing

jestjs

tdd

enzyme