Jest TypeError: e.preventDefault не является функцией

Question

Я пытаюсь протестировать метод onSubmit, но я получаю эту ошибку.

TypeError: e.preventDefault не является функцией

Я ссылаюсь на этот учебник блога

https://medium.com/@aghh1504/6-testing-react-components-using-jest-and-enzyme-b85db96fa1e3

Я ссылался на другой вопрос, но не ответил

e.preventDefault не является функцией - Jest React

App.test.tsx

describe('Should test onSubmit method',() => {
  it('should test onSubmit method', ()=>{
    const component = shallow(<App/>)
    const preventDefault = jest.fn();
    const items = ['Learn react', 'rest', 'go out'];
    component.setState({
     currentTask:"test-task",
     tasks:[...items, 'test-task']
    })

    component.find('form').simulate('submit', preventDefault);
    expect(preventDefault).toBeCalled();

  })
})

App.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';
// we need an interface to be able to use the state properties, if not error.
// the same rule applies when using props
// so here we call Istate
interface IState {
  currentTask: string;
  tasks: Array<string>;
}

export default class App extends React.Component<{}, IState>{
  constructor(props: {}){
    super(props);
    this.state = {
      currentTask: "",
      tasks:[]
    }
  }

  // when using e.preventDefault in typescript, or any paramater, it has to be followed
 //  by the following any, array, string, etc. in this case we use any

  handleSubmit(e: any){
    e.preventDefault();
    this.setState({
      currentTask: "",
      tasks: [...this.state.tasks, this.state.currentTask]
    }, () => {
      console.log(this.state.tasks)
    })


  }

  onChange = (e: any) => {
    e.preventDefault();
    this.setState({
      currentTask: e.target.value
    })

  }

  render(){
    return (
      <div className="App">
        <h1 className="sampleh1">React Typescript Todo</h1>
        <form onSubmit={(e) => this.handleSubmit(e)}>
           <input value={this.state.currentTask} type="text" placeholder="enter a todo"
            onChange={this.onChange}/>
           <button type="submit"> Add Todo</button>
        </form>
      </div>
    );

  }
}

Answer 1

Попробуйте передать объект mockEvent в качестве второго аргумента.

component.find('form').simulate('submit', { preventDefault });

Answer 2

Второй аргумент simulate - это фиктивное событие, которое передается обработчику при вызове onSubmit, поэтому оно должно быть в форме объекта события, которого ожидает обработчик:

component.find('form').simulate('submit', { preventDefault });

Аналогично, если вы собираетесь протестировать свою функцию onChange, вам нужно передать фиктивное событие с target/value в качестве второго аргумента simulate:

component.find('input').simulate('change', { target: { value: 'todo' } });