在 'if' 语句内时不会调用模拟函数 - 用笑话和酶反应应用程序测试？

Question

我正在为我的 React 应用程序编写测试用例，我正在尝试使用模拟功能模拟按钮点击。我将模拟函数作为 prop 传递，我在 'if' 语句中调用该函数，但是模拟函数没有被调用并且测试失败但是如果我在没有 [=27= 的情况下调用该函数] 语句它被调用并且测试通过。为什么会这样？

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。

Answer 1

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

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

Answer 2

安装组件时通过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 }) => { 
}

在 'if' 语句内时不会调用模拟函数 - 用笑话和酶反应应用程序测试？

Mock function doesn't get called when inside 'if' statement - React app testing with jest and enzyme?

mocking

reactjs

jestjs

enzyme

react-testing