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

【问题标题】：Mocking a simple function in react.js, jest, enzyme在 react.js、jest、酶中模拟一个简单的函数
【发布时间】：2021-01-01 23:58:18
【问题描述】：

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

我现在的测试是这样的

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

任何帮助都会很棒！

【问题讨论】：

在您的测试中，自从您模拟了 deleteItem 回调后，它实际上从传递给 list 属性的 items 对象中删除了一个项目。但是，您可以断言 deleteItem 模拟是使用指定的项目 ID 调用的。 TBH，无论如何测试都应该是这样，因为被测组件似乎没有任何逻辑除了呈现项目列表并附加onClick回调。

标签： reactjs unit-testing jestjs tdd enzyme

【解决方案1】：

在您的测试中，因为您模拟了 deleteItem 回调，它实际上并没有从传递给 list 属性的 items 对象中删除一个项目。此外，const textEl = wrapper.find("#text-output p") 之前 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");
});

【讨论】：