Enzyme simulate an onChange event

by

You can simply spy to the method directly via the prototype.

it("responds to name change", done => {
  const handleChangeSpy = sinon.spy(New.prototype, "handleChange");
  const event = {target: {name: "pollName", value: "spam"}};
  const wrap = mount(
    <New />
  );
  wrap.ref('pollName').simulate('change', event);
  expect(handleChangeSpy.calledOnce).to.equal(true);
})

Alternatively, you can use spy on the instance’s method, but you have to make a forced update because the component is already rendered after mount is called, which means the onChange is already bound to its original.

it("responds to name change", done => {
  const event = {target: {name: "pollName", value: "spam"}};
  const wrap = mount(
    <New />
  );
  const handleChangeSpy = sinon.spy(wrap.instance(), "handleChange");
  wrap.update(); // Force re-render
  wrap.ref('pollName').simulate('change', event);
  expect(handleChangeSpy.calledOnce).to.equal(true);
})

More Related Contents:

  1. How can I use Jest to spy on a method call?
  2. Simulate a button click in Jest
  3. How to set initial state for useState Hook in jest and enzyme?
  4. Jest spyOn function called
  5. How to mock React component methods with jest and enzyme
  6. What do multiple arrow functions mean in JavaScript?
  7. Nested routes with react router v4 / v5
  8. ReactJS call parent method
  9. Await is a reserved word error inside async function
  10. React react-router-dom pass props to component
  11. How to get the value of an input field using ReactJS?
  12. What’s the difference between `useRef` and `createRef`?
  13. ReactJS: “Uncaught SyntaxError: Unexpected token
  14. How can I render HTML from another file in a React component?
  15. How to hide navbar in login page in react router
  16. Accessing event.target inside callback in react
  17. loading json data from local file into React JS
  18. Why did this code fail to send password reset link in firebase?
  19. How can I toggle a class on click with React?
  20. React + Firestore : Return a variable from a query
  21. to call onChange event after pressing Enter key
  22. React Error: Target Container is not a DOM Element
  23. React Hooks useState+useEffect+event gives stale state
  24. How to add “refs” dynamically with react hooks?
  25. React – setState() on unmounted component
  26. Toggle Class in React
  27. How to connect MySQL database to ReactJS app?
  28. What does the ‘…rest’ stand for in this object destructuring?
  29. React JS Server side issue – window not found
  30. React Warning: flattenChildren(…): Encountered two children with the same key

Leave a Comment