Jest TypeError: e.preventDefault is not a function

typeerror: e.preventdefault is not a function react
typeerror event preventdefault is not a function jasmine
event preventdefault is not a function angular 2
jest simulate click not working
b preventdefault is not a function
typeerror: cannot read property 'preventdefault' of undefined
jest mock module function
jest spyon event

I'm trying to test the onSubmit method, however im getting this error.

TypeError: e.preventDefault is not a function

I'm referencing this blog tutorial

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

i referenced another question but no answer

e.preventDefault is not a function - 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>
    );

  }
}

Try passing mockEvent object as second argument.

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

How to mock e.preventDefault in react component's child, TypeError: Cannot read property 'preventDefault' of undefined For those using Jest and @testing-library or react-testing-library s fireEvent , you describe('​Form component', () => { test('deos not reload page after submition', function const event = { preventDefault: () => {} } // mocks for this function jest. Event object is a parameter to the arrow function and you indeed need to pass this on to the handleDelete function. onClick={(e) => this.handleDelete(e, i)} However after this change you still need to bind the deleteTodos function in the parent, since the context of this inside this function won't be that of the React class component, you can

The second argument to simulate is the mock event that gets passed to the handler when you call onSubmit, so it has to be in the form of the event object that handler expects:

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

Likewise, if you're going to test your onChange function, you'll need to pass a mock event with a target/value as the 2nd argument to simulate:

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

e.preventDefault is not a function - Jest React - reactjs - html, currentChartValues.series.map(function(e) { return e.id; }).indexOf(e.target.value) > -1) { let options = { type: toast.TYPE.ERROR, position: toast.POSITION. btw, this might be a jest issue, since keeping ts-jest@23.0.0 does work when going back to jest@<23 (I've tried any version of jest between 23.0.0 and the latest 23.2.0 without success) This comment has been minimized.

If you using Jest

form.simulate(`submit`, {preventDefault: jest.fn()});

or just an empty function if you don't

form.simulate(`submit`, {preventDefault: () => {}});

Using Enzyme to test a React component onClick with event , Here's a quick tip for testing onClick functions where your code calls event. not actually triggering a real event – the underlying implementation is simply calling preventDefault() in your code, you will need to pass a second  Join GitHub today. GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together. Sign up. New issue.

Shallow rendered component onClick event undefined · Issue #323 , stopPropagation() isn't receiving an event argument when simulating the Your are assigning the prop.click function to the div.modal node, In a project where we've setup both babel and jest there is a problem where the .matchAll() method is not found in a string instance only in the tests. When running the code normally via babel-node everything is fine. When the same code is ran through a test it fails with: TypeError: str.matchAll is not a function. To Reproduce

Uncaught TypeError: event.preventDefault is not a function · Issue , preventDefault is not a function. At /home/benito/.atom/packages/atom-cscope/lib/​views/input-view.coffee:41 TypeError: event.preventDefault is  TypeError: expect().toMatchObject is not a function #2195. Unfortunately that function hasn't been part of a public Jest release yet. It's currently on master

How to mock e.preventDefault in react component's child, react-testing-library preventdefault typeerror: e.preventdefault is not a function jest jest spyon functional component stub event preventdefault enzyme simulate The JavaScript exception "is not a function" occurs when there was an attempt to call a value from a function, but the value is not actually a function. Message TypeError: Object doesn't support property or method {x} (Edge) TypeError: "x" is not a function

Comments
  • try this: component.find('form').simulate('submit', { preventDefault }); Object containing preventDefault
  • ok let me give this a shot.
  • the solution in your comment worked. It passes now. But this edit gives me an error.
  • Right, this is the same code, twisted a bit to be more expressive and extendable in case you need more properties on the event Mock.
  • what about component.setState({ currentTask:"test-task", tasks:[...items, 'test-task'] }) ?
  • please edit it back to the way it was, so i can mark this as an answer, im getting an error now.
  • Hmm interesting, I would have to try out how it differs.
  • yeah the onchange method is tested, thanks though. i had a similar logic to yours for the onchange method.
  • this logic works, thanks . @rikkin gave me this solution first, but thanks for explaining your logic.