在“if”语句中没有调用模拟函数 - 用玩笑和酶反应应用程序测试？

Posted 2023-02-21

【中文标题】在“if”语句中没有调用模拟函数 - 用玩笑和酶反应应用程序测试？

【英文标题】：Mock function doesn't get called when inside 'if' statement - React app testing with jest and enzyme?

【发布时间】：2021-08-31 01:40:46

【问题描述】：

我正在为我的 react 应用程序编写一个测试用例，并且我正在尝试使用模拟函数来模拟按钮单击。我将模拟函数作为道具传递，我在“if”语句中调用该函数，但没有调用模拟函数并且测试失败，但是如果我在没有“if”语句的情况下调用函数，它会得到调用并且测试通过。为什么会这样？

Form.js

const Form = ( text, incompleteList, setIncompleteList ) => 

  const submitTodoHandler = (e) => 
    e.preventDefault()

    if (text !== '') 
      setIncompleteList([...incompleteList,  name: text, id: Math.random() * 1000 ])
    
  

  return (
    <form action='' autoComplete='off'>
      <button type='submit' className='todo-button' onClick=submitTodoHandler>
        add
      </button>
    </form>
  )


export default Form

Form.test.js

import Enzyme,  shallow, mount  from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import Form from '../components/Form'

Enzyme.configure( adapter: new Adapter() )

test('Form calls setIncompleteList prop on add button onClick event', () => 
  const mockfn = jest.fn()
  const wrapper = mount(<Form setIncompleteList=mockfn />)
  wrapper.find('button').simulate('click')
  expect(mockfn).toHaveBeenCalled()
)

我正在使用 react 16。

【问题讨论】：

你没有通过text props -> mount(

@SarunUK 哦！一个愚蠢的错误。谢谢你的回答！

【参考方案1】：

在安装组件时传递value 和incompleteList

    test('Form calls setIncompleteList prop on add button onClick event', () => 
      const mockfn = jest.fn()
      const wrapper = mount(<Form text='mock' 
incompleteList=[name: 'sarun', id: 1001] setIncompleteList=mockfn />)
      wrapper.find('button').simulate('click')
      expect(mockfn).toHaveBeenCalled()
    )

您还可以为incompletelist 设置默认值，如下所示，这样在安装组件时无需传递incompletelist，

const Form = ( text, incompleteList = [], setIncompleteList ) =>  

【参考方案2】：

问题是我没有将“文本”道具传递给表单组件并且比较失败，这就是为什么没有调用模拟并且测试失败的原因。

<Form text='mock' setIncompleteList=mockfn />

【讨论】：

您的 setIncompleteList 将在没有文本的情况下调用，您还必须传递 incompleteList。