0

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

表单.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()
})

我正在使用反应 16。

4

2 回答 2

0

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

<Form text='mock' setIncompleteList={mockfn} />
于 2021-06-15T08:18:49.187 回答
0

通过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 }) => { 
}
于 2021-06-15T08:27:59.003 回答